H5 localstorage本地緩存數據的封裝以及在vue中的使用
vue中常用的 每次增加數據 要緩存
每次刪除數據也要緩存
storage.js 文件
然後某個頁面需要本地存儲，就需要用 import引入：import storage from ‘./storage.js‘
App.vue頁面：
<template>
<div id="app">
<input type="text" v-model=‘todo‘ @keydown="doAdd($event)" />
<hr>
<br>
<h2>進行中</h2>
<ul>
<li v-for="(item,key) in list" v-if="!item.checked"> //添加一個改變的事件
<input type="checkbox" v-model="item.checked" @change="saveList()" /> {{item.title}} -- <button @click="removeData(key)">刪除</button>
</li>
</ul>
<br>
<br>
<h2>已完成</h2>
<ul>
<li v-for="(item,key) in list" v-if="item.checked"> //添加一個改變的事件
<input type="checkbox" v-model="item.checked" @change="saveList()" /> {{item.title}} -- <button @click="removeData(key)">刪除</button>
</li>
</ul>
</div>
</template>
<script>
import storage from ‘./storage.js‘;
// console.log(storage);
export default {
data () {
return {
todo:‘‘ ,
list: []
}
},
methods:{
doAdd(e){
// console.log(e);
if(e.keyCode==13){
this.list.push({
title:this.todo,
checked:false
})
}
storage.set(‘list‘,this.list); //添加數據要緩存
},
removeData(key){
this.list.splice(key,1)
storage.set(‘list‘,this.list); //刪除數據要緩存
},
saveList(){ //change事件
storage.set(‘list‘,this.list); //要緩存
}
},
//獲取緩存數據
mounted(){ /*生命周期函數 vue頁面刷新就會觸發的方法*/ mounted 生命周期在載入之後就加載數據
var list=storage.get(‘list‘);
if(list){ /*註意判斷*/ 建議先判斷緩存的數據存不存在
this.list=list;
//或者：this.list=storage.get(‘list‘)
}
}
}
</script>
<style lang="scss">
.finish{
li{
background:#eee;
}
}
</style>
H5 localstorage本地緩存數據的封裝以及在vue中的使用