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>