vue todolist 封装localstorage

Posted 2021-01-22 spinoza

 1 //封装操作localstorage本地存储的方法   模块化的文件
 2 
 3 
 4 // nodejs  基础
 5 
 6 
 7 
 8 var storage={
 9 
10     set(key,value){
11 
12         localStorage.setItem(key, JSON.stringify(value));
13     },
14     get(key){
15 
16         return JSON.parse(localStorage.getItem(key));
17     },remove(key){
18         localStorage.removeItem(key);
19     }
20 
21 }
22 
23 export default storage;

 1 <template>
 2 
 3 
 4   <div id="app"> 
 5       
 6       <input type="text" v-model=‘todo‘ @keydown="doAdd($event)" />
 7   
 8       <hr>
 9     <br>
10 
11     <h2>进行中</h2>
12 
13       <ul>
14 
15         <li v-for="(item,key) in list" v-if="!item.checked">
16            <input type="checkbox" v-model="item.checked" @change="saveList()" /> {{item.title}}   --  <button @click="removeData(key)">删除</button>
17         </li>
18       </ul>
19 
20     <br>  
21     <br>
22     <h2>已完成</h2>
23 
24 
25 
26       <ul>      
27         <li v-for="(item,key) in list" v-if="item.checked">
28           <input type="checkbox"  v-model="item.checked" @change="saveList()" /> {{item.title}}  -- <button @click="removeData(key)">删除</button>
29         </li>
30       </ul>
31   </div>
32 </template>
33 
34 <script>
35 
36 
37     import storage from ‘./model/storage.js‘;
38 
39     // console.log(storage);
40 
41     export default {     
42       data () { 
43         return {
44          
45           todo:‘‘ ,
46           list: []
47         }
48       },
49       methods:{
50 
51         doAdd(e){
52               // console.log(e);
53               if(e.keyCode==13){
54                   this.list.push({
55                     title:this.todo,
56                     checked:false
57                   })
58               }
59 
60               storage.set(‘list‘,this.list);
61         },
62         removeData(key){
63 
64             this.list.splice(key,1)
65            
66             storage.set(‘list‘,this.list);
67         }
68         , saveList(){
69 
70            storage.set(‘list‘,this.list);
71         }
72 
73       },mounted(){   /*生命周期函数       vue页面刷新就会触发的方法*/
74 
75           var list=storage.get(‘list‘);
76 
77           if(list){  /*注意判断*/
78             this.list=list;
79           }
80       }
81 
82     }
83 </script>
84 
85 
86 <style lang="scss">
87 
88 .finish{
89 
90   
91   li{
92     background:#eee;
93   }
94 }
95 
96 </style>