什么是本地存储?
简单来说就是本地信息存储-关闭浏览器后还可以看到
简单的在写一下
let p={name:'aa',age:18};
//保存到本地
function saveData(){
localStorage.setItem('msg','hello!!!')
localStorage.setItem('msg',666)
localStorage.setItem('person',JSON.stringify(p))//对象改字符串
}
//读取
function readData(){
console.log(localStorage.getItem('msg'))
console.log(localStorage.getItem('msg2'))
console.log(JSON.parse(localStorage.getItem('person')))
}
//删除
function deleteData(){
localStorage.removeItem('msg2')
}
//全部清干净
function clearData(){
localStorage.clear()
}
看上去挺简单的,那么在vue里,我们怎么实时存储到本地尼又怎么页面加载时把本地数据加载到data呢
我们假设有一个data数组,我们会时不时的修改他,我们可以简单的使用watch属性,监视数据,一旦发生变化,就修改本地存储
watch:{
todos:{
deep:true,//深度的意思,当数组里面一个值改,也会把整个数组重新加载到本地一遍
handler(value){
localStorage.setItem('todos',JSON.stringify(value))
}
}
}
读取数据到data的时候注意,由于无法判断用户是否第一次打开网站,我们可以做一次判断,若是,则初值为空的数组,若不是第一次打开,就把本地的数据加载到data里面去
data(){
return {
todos:JSON.parse(localStorage.getItem('todos'))||[]
//判断本地有没有数据,有就加上todos没有就加上空数组[]
}
}