简单 vue todo list 封装JavaScript 的storage 在localStorage

Posted 2021-01-17 sulanlan

在rsc文件夹下新建model文件夹，再新建storage.js

storage.js代码：

 1 var storage={
 2     set(key,value){
 3         localStorage.setItem(key,JSON.stringify(value));
 4     
 5     },
 6    get(key){
 7     return JSON.parse(localStorage.getItem(key));   
 8     
 9     },
10     remove(key){
11         localStorage.removeItem(key);
12     }
13 }
14 export default storage;

下面是app.vue

 

  1 <template>
  2   <div id="app">
  3 
  4     <input type=‘text‘ v-model=‘todo‘ @keyup.enter="doAdd"/> <button @click="doAdd()"> +增加</button>
  5 <br><hr><hr>
  6 
  7 <h2>进行中</h2>
  8   <ul >  
  9     
 10     <li v-for="(item,key) in list" v-if="!item.checked"><input type = "checkbox"  v-model=‘item.checked‘ @change="saveList()">{{item.title}}+++{{item.checked}} ---- <button @click="domin(key)"> 删除</button>
 11     </li>
 12     </ul>
 13 
 14 <h2>已完成</h2>
 15 
 16       <ul class="finish">  
 17     
 18     <!--<li v-for="(item,key) in list" v-if="!item.checked"><input type = "checkbox" v-modle="item.checked">{{item.title} ---- <button @click="domin(key)"> 删除</button>-->
 19      <li v-for="(item,key) in list" v-if="item.checked">
 20        <input type = "checkbox"  v-model=‘item.checked‘ @change="saveList()">{{item.title}}+++{{item.checked}} ---- <button @click="domin(key)"> 删除</button>
 21   
 22     </li>
 23     </ul>
 24 
 25 
 26   <!--  <img src="./assets/logo.png">
 27     <h1>{{ msg }}</h1>
 28     <h2>Essential Links</h2>
 29  
 30     <h2>Ecosystem</h2>
 31     <ul>
 32       <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
 33       <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
 34       <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
 35       <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
 36     </ul>-->
 37   </div>
 38 </template>
 39 
 40 <script>
 41 
 42 import storage from ‘./model/storage.js‘; //送外部引用封装
 43 //console.log(storage)
 44  export default {
 45   name: "app",
 46   data() {
 47     return {
 48      // msg: "Welcome to Your Vue.js App",
 49       todo: "",
 50       list: []
 51     };
 52   },
 53   methods: {
 54     doAdd() {
 55      // console.log(e.keyCode)
 56       //if(e.keyCode==13){
 57       this.list.push({title:this.todo, checked: null})
 58       this.todo = "";
 59     //}
 60     storage.set(‘list‘,this.list)
 61        //localStorage.setItem(‘list‘,JSON.stringify(this.list))
 62     },
 63 
 64 
 65 
 66     domin(key) {
 67       //alert(key)
 68       this.list.splice(key, 1);//key必须，key后面的1是删除几个，也是必须。
 69          storage.set(‘list‘,this.list)//这里更换了了外部storage.js。下面注释掉的是原来的代码
 70          //localStorage.setItem(‘list‘,JSON.stringify(this.list))
 71     },
 72    saveList(){
 73      storage.set(‘list‘,this.list)//这里更换了了外部storage.js。下面注释掉的是原来的代码
 74      //     localStorage.setItem(‘list‘,JSON.stringify(this.list))
 75    },
 76   
 77   
 78   },
 79 
 80   mounted() {//不要放错位置
 81       var list= storage.get(‘list‘)//这里更换了了外部storage.js。下面注释掉的是原来的代码
 82       
 83       //var list = JSON.parse(localStorage.getItem(‘list‘));
 84       if(list){
 85         this.list=list;
 86       }
 87     }
 88 
 89 
 90 
 91 
 92 
 93 
 94 
 95 }
 96 </script>
 97 
 98 <style lang="scss">
 99 #app {
100   font-family: "Avenir", Helvetica, Arial, sans-serif;
101   -webkit-font-smoothing: antialiased;
102   -moz-osx-font-smoothing: grayscale;
103   text-align: center;
104   color: #2c3e50;
105   margin-top: 60px;
106 }
107 
108 h1,
109 h2 {
110   font-weight: normal;
111 }
112 
113 ul {
114   list-style-type: none;
115   padding: 0;
116 }
117 
118 li {
119  // display: inline-block;
120   margin: 0 10px;
121 }
122 
123 a {
124   color: #42b983;
125 }
126 
127 .finish{
128   background: greenyellow
129   
130 }
131 </style>