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存值的状态：