优化Vue版本的todoList-加localStorage

之前有说要添加的功能。这次写出来了。
在线demo https://xzchen.github.io/project/vue/todolist/。
先说同第一版本的差别。

1. 加入了localStorage将数据存储在客户端。
2. 把比较复杂模板提出来，单独写入js部分。不然模板过重。
3. 增添了几个新的指令。

---

鉴于之前已经大体说过逻辑部分，也就不再次讲了。
localStorage => HTML5中新添数据，没有时间限制的数据存储
此demo中用到的方法
localStorage.setItem(‘item’, ‘value’) => 设置一个条目item的值为value;
localStorage.getItem(‘item’) => 或者条目为item的值
localStorage.hasOwnProperty(‘item’) => 判断localStorage中是否存在item这个条目。
鉴于localStorage只支持string类型的存储，

---

通过JSON.parse()从localStorage.getItem(‘todoList’)里解析出对象赋值给todoList，然后在vue里代理todoList。
虽然也可以使用“.”和“[]”去读写localStorage的数组，但是推荐使用推荐使用getItem和setItem去读写数据。(此处大多从stackoverflow得到答案)
一：有语义，增强可读性。
二：避免冲突，可能覆盖掉(重写)改对象上的已经存在成员（譬如通过localStorage.getItem = ‘test’ 那么它原有的getItem方法就会被覆盖掉。）推荐看下面这个链接的问题。
http://stackoverflow.com/questions/12632463/is-localstorage-getitemitem-better-than-localstorage-item-or-localstoragei
另外，不同Array.length; localStorage.length是只读的。所以也有↓↓↓()

---

其余基本没太改变。放代码了。看注释吧。
HTML部分

<header>    <h2>    ToDoList    <input type="text" placeholder="增加要完成的todo，回车键入" v-model.trim="newTodoText" @keyup.enter="createNewTodo">     <!-- v-trim(修饰符，自动过滤用户输入的首尾空格)-->    </h2></header><div>    <p v-if="!doingLength">没有正在进行的任务</p>    <!-- v-else 给v-if添加else块 js的if else语句。不满足if块条件时候出现 -->    <p v-else>正在进行 <span>{{doingLength}}</span></p>     <ul>        <li v-for="todo,index in todoList" v-if="!todo.flag">            <input type="checkbox" @click="todo.flag = !todo.flag">            <p @click="showEdit(todo)">                {{todo.text}}                <input                     type="text"                     v-show="todo === edit"                     v-model:value="todo.text"                    v-focus="todo === edit"                    @blur="changeValue(todo)"                    @keyup.enter="changeValue(todo)"                    @keyup.esc="todo.text =oldText;edit = ''">            </p>            <span @click="todoList.splice(index,1)"></span>        </li>    </ul></div>

JS部分

//全局注册了focus指令。 el：指令所绑定的元素，可以用来操作DOM//binding一个对象，其中value属性就指令绑定的值 expression运算后的值Vue.directive('focus', {    update(el, binding) {        if (binding.value) {            el.focus()        }    }})//如果用户的localStorage里面不存在todoList项。我们就预设一个。if (!localStorage.hasOwnProperty('todoList')) {    localStorage.setItem('todoList', '[{"text":"这里写你未完成的任务","flag":false},{"text":"支持修改，删除操作","flag":true}]')}var todoList = JSON.parse(localStorage.getItem('todoList'))  //从字符串中解析出JSON对象new Vue({    el: '#app',    data: {        newTodoText: '',         todoList: todoList,        edit: '',        oldText: '',    },    methods: {        createNewTodo() {            if (this.newTodoText) {                this.todoList.push({text: this.newTodoText, flag: false})                this.newTodoText = '';            }            else {                alert('不能输入空项目');                return;            }        },        showEdit(todo) {            this.edit = todo;   //edit引用todo，这样todo改变edit也会改变            this.oldText = todo.text; //showEidt里记录下原有的值，当用户不想修改的时候按住esc可以直接返回oldText的值        },        changeValue(todo) {            if (!todo.text) {                alert("项目不能为空")                todo.text = this.oldText;  //changeValue的时候只修改值而不改变flag状态，所以就直接改text就好（v-model指令是双向绑定。这是为空的情况）。            }            this.edit = '';   //对象的引用，一个对象置空后不影响另一对象。        }    },    watch: {        todoList: {            handler() {                localStorage.setItem('todoList', JSON.stringify(this.todoList))            },            deep: true  //保证监听数组内部值的变化        }    },    computed: {        doingLength() {            return this.todoList.filter(item => item.flag === false).length; //计算属性。根据todo.flag过滤        },        doneLength() {            return this.todoList.filter(item => item.flag === true).length;        }    }})

是不是要放源码。。。
https://github.com/xzchen/project/tree/gh-pages/vue/todolist