本地存储使用localStorage存储数据

新建项目（不知道怎么新建项目？参考文章：vue-cli3搭建vue项目）目录结构界面展示添加store.jsexportdefault{获取：(key)=>JSON.parse(window.localStorage.getItem(key))，保存：(data,key)=>window.localStorage.setItem(key,JSON.stringify(data)),};导出两个操作localStorage的函数。使用时需要导入。App.vue代码编写htmlscriptimportstorefrom"./common/store";//导入存储模块constSTORAGE_KEY="my-key";exportdefault{name:"app",data(){return{keyword:"",list:store.fetch(STORAGE_KEY)?store.fetch(STORAGE_KEY):[],//来自本地存储};},components:{},mounted(){},methods:{//添加数据addData(){this.list.push({txt:this.keyword,状态：假，}）；this.keyword="";},//点击后改变状态changeState(index){this.list[index].state=!this.list[index].state;},},watch:{//这里监听整个列表数据的变化，避免每次修改数据都需要本地存储list:{handler(){store.save(this.list,STORAGE_KEY);//写入本地存储},deep:true,//切换为false后，点击切换状态，刷新看效果，watch不触发},},};style*{margin:0;padding:0;}.wrap{width:80%;margin:0auto;}input{height:30px;width:100%;}li{height:30px;行高：30px；背景：#e2e2e2；边距：4px0；游标：指针；列表样式类型：无；填充：010px;}li.complete{背景：#5cce5c;颜色：#fff;}