Vue基础之todolist(localstorage组件封装及生命周期函数)

实现功能：

1.输入框输入商品后回车添加信息至商品；

2.点击商品下的checkbox添加商品至购物车；

3.每项商品或购物车带有删除功能，可直接删除商品；

4.页面刷新后信息不变，即商品信息及购物车信息不变。

app.vue代码

<template>
  <!--  -->
  <div id="app">

    <input type="text" v-model="todo" @keydown="doAdd($event)">
    <br>

    <h2>商品</h2>
    <ul>
      <li v-for="(item,key) in list" v-if="!item.checked">
        <input type="checkbox" v-model="item.checked" @change="saveList()"> ---{{ item.title }} ---<button @click="doDel(key)">删除</button>
      </li>
    </ul>
    <br>
    <h2>购物车</h2>
    <ul>
      <li v-for="(item,key) in list" v-if="item.checked">
        <input type="checkbox" v-model="item.checked" @change="saveList()"> ---{{ item.title }} ---<button @click="doDel(key)">删除</button>
      </li>
    </ul>
    <br>

  </div>


</template>

<script>
//导入localstorage
  import storage from './model/storage.js';
  console.log(storage);
  export default {
        name: 'App',
        data(){
          return {
            tode : '',
            list:[

            ]
          }
        },
        methods:{
          doAdd(e){
            if(e.keyCode==13){
              console.log(e.keyCode);
            //获取输入的值,将文本框的值push到list里面
            this.list.push({
              title:this.todo,
              cheched:false
            });
            storage.set('list',this.list);
            this.todo='';
            }
          },
          doDel(key){
            //alert(key);
            //删除数据
            this.list.splice(key,1);
            //H5localstorage缓存数据
            storage.set('list',this.list);
          },
          saveList(){
            storage.set('list',this.list);
          }
        },
      mounted() {//生命周期函数
          var list =  storage.get('list');
          if(list){//判断list是否存在
            this.list =list;
          }
      }

}
</script>
<style>
</style>

组建化localstroage.js文件

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

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;