Vue实现ToList和实现缓存

    <div id="app">
        <input type="text" v-model="todo" @keyup.enter="addData" /><br />
        <h4> 正在进行</h4>
        <ul><li v-for="(item,index) in list" :key="index" v-show="!item.checked">
                <input type="checkbox" v-model="item.checked " @change="setTodolist()" />{{item.title}}
            <button @click="deleteData(index)">删除</button>
            </li></ul>
        <h4> 已经完成</h4>
        <ul>
            <li v-for="(item,index) in list" :key="index" v-show="item.checked">
                <input type="checkbox" v-model="item.checked" @change="setTodolist()" />{{item.title}}
                <button @click="deleteData(index)">删除</button>
            </li>
        </ul>
    </div>
    <script type="text/javascript">
    var vue = new Vue({
        el: "#app",
        data: {
            todo: "",
            list:[]
        },
        methods: {
            addData: function () {
                this.list.push({
                    title: this.todo,
                    checked:false
                })
                this.todo = "";
                localStorage.setItem("todolist", JSON.stringify(this.list));//缓存
            },
            deleteData: function (key) {
                this.list.splice(key, 1);
                localStorage.setItem("todolist", JSON.stringify(this.list));//缓存
            },
            setTodolist: function () {
                localStorage.setItem("todolist", JSON.stringify(this.list));//缓存
            }    
        },
        mounted: function () {//表示页面加载的时候触发的方法与methods同级
            let todolist = JSON.parse(localStorage.getItem("todolist"));
            if (todolist) {
                this.list = todolist;
            }
            // alert("aaa")
        }
    })
    </script>

总结：localStorage.setItem("todolist", JSON.stringify(this.list));//缓存   是用来缓存list里的值，他缓存到了todolist

          setTodolist方法是来保存该checkbox 是否被点击，需要 @change="setTodolist()" 

         mounted方法是与methods同级的，页面刷新就会加载该方法。

         @keyup.enter="addData"表示只有打回车才能加载该方法

• 保存数据：localStorage.setItem(key,value);//JSON字符串保存的时候需要转换一下

• 读取数据：localStorage.getItem(key);

• 删除单个数据：localStorage.removeItem(key);

• 删除所有数据：localStorage.clear();

• 得到某个索引的key：localStorage.key(index);

                                         

运行结果图：