H5 localstorage The encapsulation of local cache data and its use in Vue

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