angular4.x创建服务，数据保存到localStorage

一、创建服务

作用：刷新页面之后数据还保存在页面上

ng g service services/storage

二、服务方法

setItem(key,value){

    localStorage.setItem(key,JSON.stringify(value));

  }

  getItem(key){

    return JSON.parse(localStorage.getItem(key));

  }

  removeItem(key){

    localStorage.removeItem(key);

  }

三、app.module.ts 里面注入创建的服务

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

providers: [StorageService],

四、使用服务

使用的页面引入服务，注册服务

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

constructor(private storage: StorageService) {}

.ts

ngOnInit() {

    var todolist=this.storage.getItem('todolist');

      if(todolist){

        this.ulList=todolist;

      }

  }

// 点击添加数据

  addData(){

      //0为未完成状态

      //1为完成状态

      let obj={

        username:this.username,

        status:0,

      }

      this.ulList.push(obj);

      this.username='';

      var todolist=this.storage.getItem('todolist');

          if(todolist){

            todolist.push(obj);

            //如果有数据，拿到这个数据，然后把新数据和这个storage数据拼接，重新写入

            this.storage.setItem('todolist',todolist);

          }else{

            //如果没有数据  直接给storage写入数据

              var arr=[];

              arr.push(obj);

              this.storage.setItem('todolist',arr);

          }

  }

//改变状态

  changeData(i,status){

    this.ulList[i].status=status;

    this.storage.setItem('todolist',this.ulList);

  }

.html

html详见"用angluar4.X写代办事项功能"