Angular实现简单的toDoList以及数据持久化存储

首先 我们写一个简单的一个搜索条， 类似于电子商城的搜索在下面那N条的灰色的搜索历史

第一例：类似与京东搜索：

功能概述可以实时添加搜索历史， 可以删除， 再次刷新页面时也会保留数据

HTML:

<div class="search"> <input type="text" [(ngModel)]="keyword"/> <button (click)="doSearch()">搜索</button> <hr /> <ul> <li *ngFor="let item of historyList, let i = index">{{item}} <button (click)="onDelete(i)">×</button> </li> </ul> </div>

CSS:

.search{ margin: 20px auto; width: 400px; input{ margin-bottom: 20px; width: 300px; height: 32px; } button{ margin-left: 10px; width: 80px; height: 32px; } }

TS:

import { Component, OnInit } from '@angular/core'; import { StorageService } from 'src/app/services/storage.service'; @Component({ selector: 'app-search', templateUrl: './search.component.html', styleUrls: ['./search.component.scss'], }) export class SearchComponent implements OnInit { public keyword = ''; public historyList = []; constructor(public storageService: StorageService) {} ngOnInit(): void { const searchList = this.storageService.get('searchList'); if (searchList) { this.historyList = searchList; } } public doSearch(): void { if (this.historyList.indexOf(this.keyword) === -1) { this.historyList.unshift(this.keyword); // 这个地方传入的是一个数组， 在set中需要转成json， 在get中需要解析成数组拿出来 this.storageService.set('searchList', this.historyList); this.keyword = ''; } } public onDelete(index: number): void { this.historyList.splice(index, 1); this.storageService.set('searchList', this.historyList); } }

实现效果如图：

第二例：ToDoList

功能概述: 在第一例的基础上， 我们还可以通过点击checkBox来实时更改数据状态 HTML:

<h2>搜索条</h2> <div class="toDoList"> <input type="text" [(ngModel)]="keyword" (keyup)="doAdd($event)" /> <hr /> <h3>正在运行</h3> <ul> <!-- 这里用hidden的原因是因为angular不能再一个标签中用两以上个指令 --> <li *ngFor="let item of toDoData; let i = index" [hidden]="item.status"> <input type="checkbox" [(ngModel)]="item.status" (change)="changeCheckBox() "/>{{ item.title }} <button (click)="onDelete(i)">×</button> </li> </ul> <h3>成功执行</h3> <ul> <li *ngFor="let item of toDoData; let i = index" [hidden]="!item.status"> <input type="checkbox" [(ngModel)]="item.status" (change)="changeCheckBox()" />{{ item.title }} <button (click)="onDelete(i)">×</button> </li> </ul> </div>

CSS:

h2{ text-align: center; } .toDoList{ margin: 20px auto; width: 400px; li{ line-height: 60px; } }

TS:

import { Component, OnInit } from '@angular/core'; import { StorageService } from '../../services/storage.service'; @Component({ selector: 'app-to-do-list', templateUrl: './to-do-list.component.html', styleUrls: ['./to-do-list.component.scss'], }) export class ToDoListComponent implements OnInit { public toDoData = []; public keyword = ''; public status = false; constructor(public storageService: StorageService) {} ngOnInit(): void { const storageToDoList = this.storageService.get('toDoList'); if (storageToDoList) { this.toDoData = storageToDoList; } } public doAdd(e: any): void { if (e.keyCode === 13) { if (this.toDoDataHasKeyWord(this.toDoData, this.keyword)) { this.toDoData.push({ title: this.keyword, status: this.status }); this.keyword = ''; this.storageService.set('toDoList', this.toDoData); } } } public onDelete(key: number): void { this.toDoData.splice(key, 1); this.storageService.set('toDoList', this.toDoData); } public toDoDataHasKeyWord(toDoData: any[], keyword: any): boolean { // 异步问题先不用 // this.toDoData.forEach((item) => { // }); return !toDoData.some((item) => item.title === keyword); // const { length } = toDoData; // for (let i = 0; i < length; ++i) { // if (toDoData[i].title === keyword) { // return false; // } // } // return true; // } } public changeCheckBox(): void { this.storageService.set('toDoList', this.toDoData); } }

结果截图:

他们的服务和数据持久化

Service:

import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root', }) export class StorageService { constructor() {} public set(key: string, value: any): void { localStorage.setItem(key, JSON.stringify(value)); } public get(key: string): any { return JSON.parse(localStorage.getItem(key)); } public remove(key: string): void { localStorage.removeItem(key); } }

然后我们可以通过Chorme 看localStroage存值的状态：