localStorage 存储demo 例子

localStorage 存储demo 例子

App.vue 文件 未封装版

<template>
  <div id="app">
    <input type="text" v-model="todo" @keydown="doAdd($event)" />
    <hr />
    <h2>进行中</h2>
    <br />
    <ul>
      <li v-for="(item,index) in list " :key="index" v-if="!item.checked">
        <input type="checkbox" v-model="item.checked" @change="savelist()" />
        我是第{{index+1}}个数据----{{item.title}} --------{{item.checked}}
        <button
          @click="removeData(index)"
        >删除</button>
      </li>
    </ul>
    <hr />
    <h2>已完成</h2>
    <br />
    <ul>
      <li v-for="(item,index) in list " :key="index" v-if="item.checked">
        <input type="checkbox" v-model="item.checked" @change="savelist()" />
        我是第{{index+1}}个数据----{{item.title}} --------{{item.checked}}
        <button
          @click="removeData(index)"
        >删除</button>
      </li>
    </ul>
  </div>
</template>

<script>

export default {
  data() {
    return {
      todo: "",
      list: []
    };
  },

  mounted() {
    var list = JSON.parse(localStorage.getItem("list"));
    console.log("list", list);
    if (list) {
      this.list = list;
    }
  },
  methods: {
    //点击 多选框 也要存一下 localStorage
    savelist() {
      localStorage.setItem("list", JSON.stringify(this.list));
    },
    // 添加
    doAdd(e) {
      if (e.keyCode == 13) {
        //如果按键的keyCode 是13 就执行添加操作
        this.list.push({
          //在数组后面push
          title: this.todo, //input框输入的内容
          checked: false //默认为false 不选中
        });
        localStorage.setItem("list", JSON.stringify(this.list)); //添加后 把这个list 数组转化成json格式字符串,存起来
      }
    },
    // 删除
    removeData(key) {
      this.list.splice(key, 1); //根据 key 索引 删除数组的元素
      localStorage.setItem("list", JSON.stringify(this.list)); // 删除后 把数组再一次存起来
    }
  }
};
</script>

<style lang="scss">
.finish {
  li {
    background: #eee;
  }
}
</style>

App.vue 文件 封装版

<template>
  <div id="app">
    <input type="text" v-model="todo" @keydown="doAdd($event)" />
    <hr />
    <h2>进行中</h2>
    <br />
    <ul>
      <li v-for="(item,index) in list " :key="index" v-if="!item.checked">
        <input type="checkbox" v-model="item.checked" @change="savelist()" />
        我是第{{index+1}}个数据----{{item.title}} --------{{item.checked}}
        <button
          @click="removeData(index)"
        >删除</button>
      </li>
    </ul>
    <hr />
    <h2>已完成</h2>
    <br />
    <ul>
      <li v-for="(item,index) in list " :key="index" v-if="item.checked">
        <input type="checkbox" v-model="item.checked" @change="savelist()" />
        我是第{{index+1}}个数据----{{item.title}} --------{{item.checked}}
        <button
          @click="removeData(index)"
        >删除</button>
      </li>
    </ul>
  </div>
</template>

<script>
import storage from "./model/storage.js";

export default {
  data() {
    return {
      todo: "",
      list: []
    };
  },

  mounted() {
    var list = storage.get("list");
    // var list = JSON.parse(localStorage.getItem("list"));
    console.log("list", list);
    if (list) {
      this.list = list;
    }
  },
  methods: {
    //点击 多选框 也要存一下 localStorage
    savelist() {
      storage.set("list", this.list);
      // localStorage.setItem("list", JSON.stringify(this.list));
    },
    // 添加
    doAdd(e) {
      if (e.keyCode == 13) {
        //如果按键的keyCode 是13 就执行添加操作
        this.list.push({
          //在数组后面push
          title: this.todo, //input框输入的内容
          checked: false //默认为false 不选中
        });
        storage.set("list", this.list);
        // localStorage.setItem("list", JSON.stringify(this.list)); //添加后 把这个list 数组转化成json格式字符串,存起来
      }
    },
    // 删除
    removeData(key) {
      this.list.splice(key, 1); //根据 key 索引 删除数组的元素
      storage.set("list", this.list);
      // localStorage.setItem("list", JSON.stringify(this.list)); // 删除后 把数组再一次存起来
    }
  }
};
</script>

<style lang="scss">
.finish {
  li {
    background: #eee;
  }
}
</style>

storage 文件

import storage from “./model/storage.js”;

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

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