Angular7 服务及数据持久化

github源码地址：https://github.com/wangduxiu/Angular7-Demo.git

服务

• 先创建一个服务ng service services/storage
• 创建完服务需要在app.module.ts中引用和声明

import { StorageService } from './services/storage.service';
providers: [StorageService],

• 在服务中定义一个公有的方法

  get(){return '我是一个服务';}

• 在其他组件中调用需要再次引入这个服务

import { StorageService } from '../../services/storage.service';

然后再constructor中实例化，通过this调用对象点方法

  constructor(public storage:StorageService) { console.log(this.storage.get());}

数据持久化

• 利用LocalStorage 在服务定义好方法：

  //LocalStorage设置数据set(key:string,value:any){localStorage.setItem(key,JSON.stringify(value));}//获取数据get(key:string){return JSON.parse(localStorage.getItem(key));}//删除数据remove(key:string){localStorage.removeItem(key);}

• 在其他模块中，添加数据先将数据放到storage中

  /**添加到待办事项中 */doAdd(e) {if(e.keyCode == 13 && this.keyWords) {if(!this.tolistHasKeyWord(this.toList,this.keyWords)){this.toList.push({title:this.keyWords,status:0        //0表示待办事项   1表示已完成事项}); //**  将数据缓存到storage  **this.storage.set('todolist',this.toList);}else{alert("输入内容重复");}this.keyWords=""; }}

• 删除数据也要将删除后的数据重新set到storage中

  /**删除待办事项 */delData(key) {this.toList.splice(key,1);//将删除后的数据重新set到storage中this.storage.set('todolist',this.toList);}

• 然后在页面初始化（Oninit）的时候先到storage中看有没有数据，如果有优先将storage中的数据渲染到页面中

  ngOnInit() {//判断storage中有没有数据var todolist:any = this.storage.get('todolist');//如果有则将数据赋值给this.toilstif(todolist){this.toList = todolist;}}