本地存储 使用localStorage 存储数据

新建项目（不知道怎么新建项目？参考文章：vue-cli3 搭建vue项目）

目录结构

添加store.js

export default {
    fetch: (key) => JSON.parse(window.localStorage.getItem(key)),
    save: (data, key) => window.localStorage.setItem(key, JSON.stringify(data)),
};

将两个操作localStorage的函数export出去。
需要在使用的时候import进来。

App.vue代码编写

html

script

import store from "./common/store"; // 引入store模块

const STORAGE_KEY = "my-key";

export default {
    name: "app",
    data() {
        return {
            keyword: "",
            list: store.fetch(STORAGE_KEY) ? store.fetch(STORAGE_KEY) : [], //从本地存储中获取数据
        };
    },
    components: {},
    mounted() {},
    methods: {
        // 添加数据
        addData() {
            this.list.push({
                txt: this.keyword,
                state: false,
            });
            this.keyword = "";
        },
        // 点击后改变状态
        changeState(index) {
            this.list[index].state = !this.list[index].state;
        },
    },
    watch: {
        // 这里监听整个list数据的变化，避免每次修改数据的时候都需要进行本地存储
        list: {
            handler() {
                store.save(this.list, STORAGE_KEY); //写入本地存储
            },
            deep: true, // 切换为false之后，点击切换状态，刷新看效果，未触发watch。
        },
    },
};

style

*{margin: 0;padding: 0;}
.wrap {width: 80%;margin: 0 auto;}
input {height: 30px;width: 100%;}
li {
    height: 30px;    
    line-height: 30px;
    background: #e2e2e2;
    margin: 4px 0;
    cursor: pointer;
    list-style-type: none;
    padding: 0 10px;
}
li.complete {background: #5cce5c;color: #fff;}