Vue中的模块化以及封装-storage数据持久化

效果：

1编写封装storage.js

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;

目录结构：

2使用

<template>
  <div>
    <input type="text" v-model="todo" @keydown="doAdd($event)"/>
    <br>
    <hr>
    <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="removeData(key)">删除</button>
      </li>
    </ul>
    <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="removeData(key)">删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
  import storage from './storage.js'
  // console.log(storage);

  export default {
    name: "List",
    data() {
      return {
        todo: '',
        list: [

          {
            title: '录制nodejs',
            checked: true
          },
          {
            title: '录制ionic',
            checked: false
          }
        ]
      }
    },
    methods: {
      doAdd(e) {
        console.info(e.keyCode)
        if (e.keyCode == 13) {//回车键
          this.list.push({
            title: this.todo,
            checked: false
          });
          this.todo = '';
          // localStorage.setItem('list', JSON.stringify(this.list))
          storage.set('list',this.list)
        }
      },
      removeData(key) {
        this.list.splice(key, 1);
        // 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() {
      // let list = JSON.parse(localStorage.getItem('list'))
      let list = storage.get('list');
      if (list) {
        this.list = list;
      }
    },
  }
</script>

<style scoped>

</style>