Angular ToDoList数据持久化

1. 创建服务

   ng g service service/storage

2. 在app.module.ts中引入创建的服务，并声明

import {
      StorageService } from './service/storage.service';
providers: [StorageService], /*配置项目所需要的服务 */ 

3. 在用到的组件里面引入服务

import {
      StorageService } from './service/storage.service';
providers: [StorageService], /*配置项目所需要的服务 */ 
// 初始化
constructor(public storage: StorageService) {
     
    console.log(this.storage.get());
}

4. 封装localstorage

   set(key: any, value: any) {
     
    	localStorage.setItem(key, JSON.stringify(value));
   }
   get(key: any) {
     
   		 return JSON.parse(localStorage.getItem(key));
   }
   remove(key: any) {
     
   		 localStorage.removeItem(key);
   }

forExample

注意：这里为大家介绍一个生命周期函数 ngOnInit：（页面刷新会触发这个生命周期函数）

<div class="search_box">
    <input type="text" placeholder="请输入……"  [(ngModel)]="keyWord" (keyup)="keyUpFn($event)">
    <hr>
    <p>待办事件</p>
    <div class="search_list" *ngFor="let item of historyList;let key=index" [hidden]="item.status==1">
      <input type="checkbox" [(ngModel)]="item.status" (change)="checkedChange()">  {
     {
     item.title}} <button (click)="delete(key)">X</button>
    </div>
    <p>已完成事件</p>
    <div class="search_list" *ngFor="let item of historyList;let key=index" [hidden]="item.status==0">
        <input type="checkbox" [(ngModel)]="item.status" (change)="checkedChange()">  {
     {
     item.title}} <button (click)="delete(key)">X</button>
    </div>
</div>

import {
      Component, OnInit } from '@angular/core';
import {
     StorageService} from '../service/storage.service';
@Component({
     
  selector: 'app-to-dolist',
  templateUrl: './to-dolist.component.html',
  styleUrls: ['./to-dolist.component.scss']
})
export class ToDolistComponent implements OnInit {
     
  public keyWord: string;
  public historyList: any[] = [];
  constructor(public storage: StorageService) {
     
    console.log(this.storage.get());
  }

  ngOnInit() {
     
    console.log('页面刷新会触发这个生命周期函数');
    const searchList: any = this.storage.get('searchlist');
    if (searchList) {
     
      this.historyList = searchList;
    }
  }

  // 键盘事件
  keyUpFn(e) {
     
    if (e.keyCode == 13) {
     
      if (this.historyList.indexOf(this.keyWord) == -1) {
     
        this.historyList.push({
     
          title: this.keyWord,
          status: false
        });
      }
      this.keyWord = '';
      this.storage.set('searchlist', this.historyList);
    }
  }
  // 删除信息事件
  delete(key) {
     
    this.historyList.splice(key, 1);
    this.storage.set('searchlist', this.historyList);
  }
  // 监听状态
  checkedChange() {
     
    console.log('事件触发了');
    this.storage.set('searchlist', this.historyList);
  }
}

• Angular中 所有的组件都可以调用服务, 服务中没有办法调用组件，组件也没有办法调用组件中的方法，服务和服务之间可以相互调用。