Vue 中本地数据存储

Vue 中数据存储主要使用到的对象为 localStorage 监听放大为watch

首先在data 中定义需要监听的值

data() {
    return {
        title: "我叫路飞",
        destation: "要成为海贼王的男人",
        list: [],
    };
},

开始做数据监听

// 使用Vue 的 watch 属性对数据进行监听
 watch: {
// 需要监听哪个对象这里就声明哪个对象  deep：深度监听 监听对象中任意值改变都会被监听
    list: { // 监听本地list 数组
        deep: true,
        handler(value) {
            localStorage.setItem("todo", JSON.stringify(value));
        },
    },

    title: { // 监听本地title对象
        deep: false,
        handler(value) {
            localStorage.setItem("title", JSON.stringify(value));
        },
    },
},
    

当前页加载时取出缓存到本地的值

created() {
    // 从本地缓存中读取数据
    this.list = JSON.parse(localStorage.getItem("todo")) || [];
    this.title = JSON.parse(localStorage.getItem("title")) || "";
},

本地数据存储就完成了