09 Vue 中的模块化以及封装Storage实现todolist 待办事项 已经完成 和进行中持久化

内容：实现页面的数据在刷新后还保存在页面中；
（1）h5中的localstorage方法实现
缓存数据方法localStorage（h5的方法），
每次增加和删除都需要缓存，
setItem没法直接设置对象，必须先把对象转化为json对象，在转化为json字符串

//封装操作localstorage本地存储的方法 模块化的文件

/*localStorage.setItem("key", "value"); key是对象名称，value是值如：
list:[
    checked:false;
    title:this.todo;
],此时key=list,value=this.list;,value对应一个字符串

保存数据语法：

localStorage.setItem("key", "value");

读取数据语法：

var lastname = localStorage.getItem("key");

删除数据语法：

localStorage.removeItem("key");

*/ 

（2）vue中模块化封装以及调用
vue中需要封装js文件的话，需要在目录中新建一个model的文件夹，新建storage.js文件让，然后文件夹中定义localstorage的方法；定义完成之后需要将定义的方法暴露一下，暴露语句“export default +storage;”否则别的地方访问不到；如下：

封装完成之后，在vue文件中需要引入

      import storage from './model/storage.js'         /*./相当于当前目录*/ 

  在各个方法中的调用：
   keyclick(e){
    console.log(e);
  if(e.keyCode==13){
     this.list.push(
    {
      checked:false,
      title:this.todo
    }
  )
  storage.set('list',this.list);
  }

}

（3）扩展–生命周期函数
mounted 在程序中的位置和methods同级，vue页面刷新就会触发此方法
写法mounted(){}
（4）完整例子代码：

vue文件：
<template>
  <div id="app">
    <input type="text" v-model='todo' @keydown="keyclick($event)"/>
    <button @click="adddata()">增加</button>
    
    <h2>正在进行中</h2>
    <ul>
      <li v-for="(item,key) in  list" v-if='!item.checked'>
        <input type="checkbox" v-model='item.checked'  @change="savelist()"/>{{key}}-{{item}}
        <button @click="deldata(key)">删除</button>
        </li>
    </ul>
    <br/>
    <br/>
    <br/>
    <h2>已完成</h2>
    <ul>
      <li v-for="(item,key) in  list" v-if='item.checked'>
        <input type="checkbox" v-model='item.checked'  @change="savelist()"/>{{key}}-{{item}}</li>
    </ul>
    <br/>
    <br/>
    <br/>
     </div>
</template>

<script>
import storage from './model/storage.js'/*./相当于当前目录*/ 
console.log(storage);
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      todo:'',
      list:[]
    }
  },methods:{
    adddata(){
      this.list.push(
        {
          checked:false,
          title:this.todo
        }
      )
      
    },
    deldata(key){
      this.list.splice(key,1);
      /*缓存数据方法localStorage（h5的方法），
      每次增加和删除都需要缓存，
      setItem没法直接设置对象，必须先把对象转化为json对象，在转化为json字符串*/
       //localStorage.setItem('list',JSON.stringify(this.list))
       storage.set('list',this.list);
    },
    keyclick(e){
     console.log(e);
      if(e.keyCode==13){
        this.list.push(
        {
          checked:false,
          title:this.todo
        }
      )
     // localStorage.setItem('list',JSON.stringify(this.list))
     storage.set('list',this.list);
      }

    },
    savelist(){
     // localStorage.setItem('list',JSON.stringify(this.list))
     storage.set('list',this.list);

    }
  },
  mounted(){/*生命周期函数，vue页面刷新就会触发的方法，获取缓存数据*/
   //var list=JSON.parse(localStorage.getItem('list'));
   var list=storage.get('list');
   if (list){
     this.list=list;
   }
  }
}
</script>

<style lang="scss">

</style>

封装的storage文件：
var storage={
    set(key,value){
        localStorage.setItem(key,JSON.stringify(value));

    },
    get(key){
        return JSON.parse(localStorage.getItem(key));

    },remove(key){
        localStorage.removeItem(key);
    }
}
export default storage;