Angular 服务（service）实现 ToDoList 数据持久化

继续上一篇【ToDoList 功能】完善，通过ng服务和BOM对象【Local Storage】实现数据的持久化。

首先通过 Angular CLI 命令【ng generate service services/dataStorange】创建一个服务【dataStorange】，代码示例如下：

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class DataStorageService {

  public serviceData:string = '我是服务中的数据';
  constructor() { }

  //获取数据
  get(key:string):any {
    return JSON.parse(localStorage.getItem(key)); //localStorage 是浏览器(BOM)对象
  }

  //保存数据
  set(key:string, value:any):void{
    localStorage.setItem(key,JSON.stringify(value));
  }

  //删除数据
  remove(key:string):void{
    localStorage.removeItem(key);
  }

}

然后继续改造【JdAppToDoList】组件：【jd-app-to-do-list.component.ts】

import { Component,OnInit } from '@angular/core';

//引入服务 DataStorageService
import { DataStorageService } from '../../services/data-storage.service';

@Component({
  selector: 'app-jd-app-to-do-list',
  templateUrl: './jd-app-to-do-list.component.html',
  styleUrls: ['./jd-app-to-do-list.component.css']
})
export class JdAppToDoListComponent implements OnInit {

  private readonly dataKey:string = 'todoList'; //存储数据对象的键，获取数据时使用
  public searchItem:string = ''; //搜索关键字
  public todoList:Array