storage.js：
//封裝localStorage本地存儲的方法（模塊化文件）
let storage={
set(key,value){//將'this.list'以字符串的形式緩存在本地悲龟。
localStorage.setItem(key,JSON.stringify(value));//'localStorage'設置操作
},get(key){//將緩存在本地的'history'字符串重新解析成對象。
return JSON.parse(localStorage.getItem(key));//'localStorage'獲取操作
},remove(){
localStorage.removeItem(key);//'localStorage'刪除操作
}
}
export default storage;//將'storage'暴露出去
App.vue：
--Todolist雙向數(shù)據(jù)綁定
--模板根組建
<template>
<div id="app">
<input type="text" v-model="todo" v-on:keydown="addObj2($event)">
<button @click="addObj()">+添加</button>
<ul>
<h3>已完成</h3>
<li v-for="(item,key) in todoList" v-if="item.isdo"><input type="checkbox" v-model="item.isdo" @change="Change()">{{item.todo}} <button @click="deleteObj(key)">刪除</button></li>
</ul>
<ul>
<h3>未完成</h3>
<li v-for="(item,key) in todoList" v-if="!item.isdo" v-bind:class="{'Done':!item.isdo}"><input type="checkbox" v-model="item.isdo" @change="Change()">{{item.todo}} <button @click="deleteObj(key)">刪除</button></li>
</ul>
<router-view/>
</div>
</template>
<script>
import storage from './model/storage.js'//引入剛剛封裝的'storage'模塊
export default {
name: 'App',
data (){
return{
todo:'',
todoList:[],
isdo:true,
}
},
methods:{//用于放置自定義方法
addObj(){
if(!Object.is(this.todo,'')){
let obj={};
[obj.todo,obj.isdo]=[this.todo,this.isdo];
this.todoList.push(obj);
}
storage.set('history',this.todoList);
this.todo='';
},addObj2(e){
if(e.keyCode===13){
let obj={};
[obj.todo,obj.isdo]=[this.todo,this.isdo];
this.todoList.push(obj);
storage.set('history',this.todoList);
this.todo='';
}
}
,deleteObj(key){
this.todoList.splice(key,1);//splice() 方法向/從數(shù)組中添加/刪除項目通今，然后返回被刪除的項目。
//arrayObject.splice(index,howmany,item1,.....,itemX):index 必需。整數(shù)痴突，規(guī)定添加/刪除項目的位置，使用負數(shù)可從數(shù)組結(jié)尾處規(guī)定位置狼荞。howmany 必需苞也。要刪除的項目數(shù)量。如果設置為 0粘秆，則不會刪除項目如迟。item1, ..., itemX 可選。向數(shù)組添加的新項目。
storage.set('history',this.todoList);
},Change(){
storage.set('history',this.todoList);
}
},mounted(){//生命周期函數(shù)（這個是頁面刷新就會觸發(fā)的函數(shù)）
let todoList=storage.get('history');
if(todoList){//如果'list'存在殷勘，執(zhí)行以下函數(shù)
this.todoList=todoList;
}
}
}
</script>
<style>
app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
color: #2c3e50;
margin-top: 60px;
}
.Done{
background: #ccc;
}
</style>
window.localStorage.setItem('key', value); //儲存文件
window.localStorage.getItem('key'); //讀取文件
window.localStorage.removeItem('key'); //清除文件
