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>