localstorage和vue结合使用2

 1 <template>
 2   <div class="hello">
 3     <div class="page-top">
 4         <div class="page-content">
 5             <h2>任务计划列表</h2>
 6         </div>
 7     </div>
 8     <div class="main">
 9       <h3 class="big-title">添加任务：</h3>
10       <input 
11           placeholder="例如：吃饭睡觉打豆豆；    提示：+回车即可添加任务" 
12           class="task-input" 
13           type="text"
14           v-model="todo"
15           v-on:keyup.enter="addTodo"
16       />
17       <ul class="task-count" >
18           <li >0个任务未完成</li>
19           <li class="action">
20               <a class="active" href="#all">所有任务</a>
21               <a href="#unfinished">未完成的任务</a>
22               <a href="#finished">完成的任务</a>
23           </li>
24       </ul>
25       <h3 class="big-title">任务列表：</h3>
26       <div class="tasks">
27         <span class="no-task-tip" v-show="!list.length">还没有添加任何任务</span>
28         <ul class="todo-list">
29             <li class="todo" :class="{completed:item.isChecked,editing:item===edtorTodos}"  v-for="item in list">
30                 <div class="view">
31                     <input class="toggle" type="checkbox" v-model="item.isChecked"/>
32                     <label @dblclick="edtorTodo(item)">{{item.title}}</label>
33                     <button class="destroy" @click="deleteTodo(item)"></button>
34                 </div>
35                 <input 
36                     v-foucs="edtorTodos === item" 
37                     class="edit" 
38                     type="text" 
39                     v-model = "item.title"
40                     @keyup.enter="edtorTodoed(item)"
41                     @keyup.esc="cancelTodo(item)"
42                     @blur="edtorTodoed(item)"
43                 />
44             </li>
45         </ul>
46       </div>
47 
48     </div>
49   </div>
50 </template>

 1 /*
 2     storage 主要放项目中的storage相关操作：存取等
 3 */
 4 var storage = {
 5     /**
 6      对本地数据进行操作的相关方法，如localStorage,sessionStorage的封装
 7     */
 8     setStorage: function(key, value, duration) {
 9         var data = {
10             value: value,
11             expiryTime: !duration || isNaN(duration) ? 0 : this.getCurrentTimeStamp() + parseInt(duration)
12         };
13         localStorage[key] = JSON.stringify(data);
14     },
15     getStorage: function(key) {
16         var data = localStorage[key];
17         if (!data || data === "null") {
18             return null;
19         }
20         var now = this.getCurrentTimeStamp();
21         var obj;
22         try {
23             obj = JSON.parse(data);
24         } catch (e) {
25             return null;
26         }
27         if (obj.expiryTime === 0 || obj.expiryTime > now) {
28             return obj.value;
29         }
30         return null;
31     },
32     removeStorage: function(key){
33         localStorage.removeItem(key);
34     },
35     getSession: function(key) {
36         var data = sessionStorage[key];
37         if (!data || data === "null") {
38             return null;
39         }
40         return JSON.parse(data).value;
41 
42     },
43     setSession: function(key, value) {
44         var data = {
45             value: value
46         }
47         sessionStorage[key] = JSON.stringify(data);
48     },
49     getCurrentTimeStamp: function() {
50         return Date.parse(new Date());
51     }
52 };
53 export default storage;

 1 export default {
 2   components:{Tab2},
 3   data () {
 4     return {
 5       todo:"",
 6       list:[],
 7       beforeTitle:"",
 8       edtorTodos:""
 9     }
10   },
11   created(){
12     if(this.$storage.getStorage("miao-class")){
13       var index=this.$storage.getStorage("miao-class");
14       this.list=index;
15     }
16   },
17   watch:{
18     list:{
19       handler:function(val,oldVal){
20         this.$storage.setStorage("miao-class",val);
21       },
22       deep:true
23     }
24   },
25   computed:{
26     
27   },
28   methods: {
29     addTodo(){
30       this.list.push({
31         title:this.todo,
32         isChecked:false
33       })
34       this.todo='';
35     },
36     deleteTodo(todo){
37       var index=this.list.indexOf(todo);
38       this.list.splice(index,1);
39     },
40     edtorTodo(todo){
41       this.beforeTitle=todo.title,
42       this.edtorTodos=todo;
43     },
44     edtorTodoed(todo){
45       //编辑成功
46       this.edtorTodos='';
47     },
48     cancelTodo(todo){
49       //取消编辑
50       todo.title=this.beforeTitle;
51       this.beforeTitle = '';
52 
53       //让div显示出来，input隐藏
54       this.edtorTodos = '';
55     }
56   },
57   directives:{
58     "foucs":{
59       update(el,binding){
60         if(binding.value){
61           el.focus();
62         }
63       }
64     }
65   }
66 }
67 </script>