本地缓存

1、localstorage：永久性的保留，保存是以字符串的形式保存 ，  .removeItem（）清除缓存

2、sessionStorage：一个会话期间的保留，从先打开浏览器过后就会自动清除。

    　他们保存的字符串我们可以使用json.parse（）来进行解析。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
        <script type="text/javascript" src="js/vue.js"></script>
        
    </head>
    <body>
        <div id="app">
            <div class="nav">
                <input type="text" v-model="todoInput" placeholder="请你输入你即将要做的事" @keydown="inputText" name="" id="" value=""/>
            </div>
            <div class="todo">
                <h1>待做的事</h1>
                <div class="todoItem" v-for="(item,index) in todoList">
                    <span class="content">{{item}}</span>
                    <span class="btn" @click="done($event,index)">完成</span>
                </div>
            </div>
            
            <div class="done">
                <h1>已完成的事情</h1>
                <div class="todoItem" v-for="item in doneList">
                    <span class="content">{{item}}</span>
                    
                </div>
            </div>
        </div>
        
        <script type="text/javascript">
            var app = new Vue({
                el:"#app",
                data:{
                    todoInput:"",
                    todoList:[],
                    doneList:[]
                },
                methods:{
                    inputText:function(e){
                        if (e.key=="Enter") {
                            if(this.todoInput){
                                this.todoList.push(this.todoInput)
                                localStorage.todoList = JSON.stringify(this.todoList)
                            }
                        }
                    },
                    done:function(e,index){
                        var delItem = this.todoList.splice(index,1)
                        this.doneList.push(delItem[0])
                        localStorage.doneList = JSON.stringify(this.doneList)
                        localStorage.todoList = JSON.stringify(this.todoList)
                    }
                },
                mounted:function(){
                    if(localStorage.todoList){
                        this.todoList = JSON.parse(localStorage.todoList)
                        
                    }
                    if(localStorage.doneList){
                        this.doneList = JSON.parse(localStorage.doneList)
                    }
                }
            })
        </script>
    </body>
</html>

　　

 

posted @ 2018-08-17 17:22  洺剑残虹  阅读(218)  评论(0)  编辑  收藏  举报