添加本地缓存功能

xxx.service

import { Injectable } from '@angular/core';@Injectable({providedIn: 'root'
})
export class XxxxxService {constructor() { }get(key:string){return JSON.parse(localStorage.getItem(key));}set(key:string , value:any){localStorage.setItem(key , JSON.stringify(value));}remove(key:string){localStorage.removeItem(key);}
}//   记得在 app.module.ts 引入复制代码

html

<h3>添加了本地缓存的功能.localStorage....service</h3>
<input type="text" [(ngModel)]="keywords"  (keyup)='doAdd($event)' />
<button (click)="doSearch()">search....</button><hr><h3>待办事项</h3>
<ul><li *ngFor="let item of history_List;  let key=index;"  [hidden]="item.status == 1" ><input type="checkbox" [(ngModel)]="item.status" [id]="'checkbox' + key" /> <label [for]="'checkbox' + key" >{{item.title}}</label>   --- <button (click)="delete_history(key)">X</button>
</li>
</ul><hr><h3>已经完成的事</h3>
<ul><li *ngFor="let item of history_List;  let key=index;"  [hidden]="item.status == 0" ><input type="checkbox" [(ngModel)]="item.status"  [id]="'checkbox' + key"  />  <label  [for]="'checkbox' + key"  > {{item.title}}</label>  ---- <button (click)="delete_history(key)">X</button></li></ul>复制代码

component.ts

import { Component, OnInit } from '@angular/core';
import { XxxxxService } from '../xxxxx.service';@Component({selector: 'app-search',templateUrl: './search.component.html',styleUrls: ['./search.component.less']
})
export class SearchComponent implements OnInit {public keywords:string;public history_List:any[] = [{title:'do homeword',status:0},{title:'go shopping',status:1},{title:'play games',status:0},];constructor(public xxxxx:XxxxxService) { }ngOnInit() {let searchlist = this.xxxxx.get('search_histroy');if(searchlist){this.history_List = searchlist;}}doSearch(){//   如果关键字不存在 返回-1  就push  也就是有没有重复的数据if(this.if_has_ketwords(this.history_List , this.keywords)){this.history_List.push({title:this.keywords,status:0         // 0 表示 待办事项  1 表示已经完成的事项});this.xxxxx.set('search_histroy' , this.history_List);}this.keywords='';}doAdd(ev){if(ev.keyCode == 13){this.doSearch();}}delete_history(key){this.history_List.splice(key,1);}if_has_ketwords(history_List:any , keywords:any){if(!keywords){return false;}for(let i=0 ; i < history_List.length;i++){if(history_List[i].title == keywords){return false;}}return true;}}复制代码

app.module.ts

import { FormsModule } from '@angular/forms';imports: [BrowserModule,FormsModule],
复制代码