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

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

              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() {
 47return {
 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){ 57this.list.push({title:this.todo, checked: null})
 58this.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) 68this.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() {//不要放错位置 81var list= storage.get(‘list‘)//这里更换了了外部storage.js。下面注释掉的是原来的代码 82 83//var list = JSON.parse(localStorage.getItem(‘list‘)); 84if(list){
 85this.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}
107108h1,
109h2 {
110   font-weight: normal;
111}
112113ul {
114   list-style-type: none;
115   padding: 0;
116}
117118li {
119// display: inline-block;120   margin: 0 10px;
121}
122123a {
124  color: #42b983;
125}
126127.finish{
128  background: greenyellow
129130}
131 </style>