本地缓存
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>
