localstorage和vue结合使用2

html

 <template>
   <div class="hello">
     <div class="page-top">
         <div class="page-content">
             <h2>任务计划列表</h2>
         </div>
     </div>
     <div class="main">
       <h3 class="big-title">添加任务：</h3>
       <input
           placeholder="例如：吃饭睡觉打豆豆；    提示：+回车即可添加任务"
           class="task-input"
           type="text"
           v-model="todo"
           v-on:keyup.enter="addTodo"
       />
       <ul class="task-count" >
           <li >0个任务未完成</li>
           <li class="action">
               <a class="active" href="#all">所有任务</a>
               <a href="#unfinished">未完成的任务</a>
               <a href="#finished">完成的任务</a>
           </li>
       </ul>
       <h3 class="big-title">任务列表：</h3>
       <div class="tasks">
         <span class="no-task-tip" v-show="!list.length">还没有添加任何任务</span>
         <ul class="todo-list">
             <li class="todo" :class="{completed:item.isChecked,editing:item===edtorTodos}"  v-for="item in list">
                 <div class="view">
                     <input class="toggle" type="checkbox" v-model="item.isChecked"/>
                     <label @dblclick="edtorTodo(item)">{{item.title}}</label>
                     <button class="destroy" @click="deleteTodo(item)"></button>
                 </div>
                 <input
                     v-foucs="edtorTodos === item"
                     class="edit"
                     type="text"
                     v-model = "item.title"
                     @keyup.enter="edtorTodoed(item)"
                     @keyup.esc="cancelTodo(item)"
                     @blur="edtorTodoed(item)"
                 />
             </li>
         </ul>
       </div>

     </div>
   </div>
 </template>

js

我在main.js里面引入了一个自定义的storage.js库

库

 /*
     storage 主要放项目中的storage相关操作：存取等
 */
 var storage = {
     /**
      对本地数据进行操作的相关方法，如localStorage,sessionStorage的封装
     */
     setStorage: function(key, value, duration) {
         var data = {
             value: value,
             expiryTime: !duration || isNaN(duration) ? 0 : this.getCurrentTimeStamp() + parseInt(duration)
         };
         localStorage[key] = JSON.stringify(data);
     },
     getStorage: function(key) {
         var data = localStorage[key];
         if (!data || data === "null") {
             return null;
         }
         var now = this.getCurrentTimeStamp();
         var obj;
         try {
             obj = JSON.parse(data);
         } catch (e) {
             return null;
         }
         if (obj.expiryTime === 0 || obj.expiryTime > now) {
             return obj.value;
         }
         return null;
     },
     removeStorage: function(key){
         localStorage.removeItem(key);
     },
     getSession: function(key) {
         var data = sessionStorage[key];
         if (!data || data === "null") {
             return null;
         }
         return JSON.parse(data).value;

     },
     setSession: function(key, value) {
         var data = {
             value: value
         }
         sessionStorage[key] = JSON.stringify(data);
     },
     getCurrentTimeStamp: function() {
         return Date.parse(new Date());
     }
 };
 export default storage;

import storage from '@/utils/storage.js'
Vue.config.productionTip = false

//将常用工具方法扩展成Vue实例
Vue.prototype.$storage=storage;

 export default {
   components:{Tab2},
   data () {
     return {
       todo:"",
       list:[],
       beforeTitle:"",
       edtorTodos:""
     }
   },
   created(){
     if(this.$storage.getStorage("miao-class")){
       var index=this.$storage.getStorage("miao-class");
       this.list=index;
     }
   },
   watch:{
     list:{
       handler:function(val,oldVal){
         this.$storage.setStorage("miao-class",val);
       },
       deep:true
     }
   },
   computed:{

   },
   methods: {
     addTodo(){
       this.list.push({
         title:this.todo,
         isChecked:false
       })
       this.todo='';
     },
     deleteTodo(todo){
       var index=this.list.indexOf(todo);
       this.list.splice(index,1);
     },
     edtorTodo(todo){
       this.beforeTitle=todo.title,
       this.edtorTodos=todo;
     },
     edtorTodoed(todo){
       //编辑成功
       this.edtorTodos='';
     },
     cancelTodo(todo){
       //取消编辑
       todo.title=this.beforeTitle;
       this.beforeTitle = '';

       //让div显示出来，input隐藏
       this.edtorTodos = '';
     }
   },
   directives:{
     "foucs":{
       update(el,binding){
         if(binding.value){
           el.focus();
         }
       }
     }
   }
 }
 </script>