Each additional data that is commonly used in Vue is cached
Cache every time you delete data
Storage.js file
Then a page needs local storage, which needs to be imported with import: Import storage from './storage.js '
App.vue page:
<template>
<div id= "App" >
<input type= "text" v-model= ' todo ' @keydown = "Doadd ($event)"/>
<br>
<ul>
<li v-for= "(item,key) in list" v-if= "!item.checked" > //Add a changed event
<input type= "checkbox" v-model= "item.checked" @change = "savelist ()"/> {{Item.title}}--<button @ click= "Removedata (key)" > Delete </button>
</li>
</ul>
<br>
<br>
<ul>
<li v-for= "(item,key) in list" v-if= "item.checked" >//Add a changed event
<input type= "checkbox" v-model= "item.checked" @change = "savelist ()"/> {{Item.title}}--<button @ click= "Removedata (key)" > Delete </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); Add data to cache
},
Removedata (key) {
This.list.splice (key,1)
Storage.set (' list ', this.list); Delete data to cache
},
Savelist () {//change event
Storage.set (' list ', this.list); To cache
}
},
Get Cached data
Mounted () {/* Life cycle Function Vue page Refresh will trigger method */Mounted life cycle load data after loading
var list=storage.get (' list ');
if (list) {/* Pay attention to the judgment */recommend first to determine that the cached data does not exist
This.list=list;
Or:this.list=storage.get (' list ')
}
}
}
</script>
<style lang= "Scss" >
. finish{
li{
Background: #eee;
}
}
</style>
H5 localstorage The encapsulation of local cache data and its use in Vue