Vue中数据缓存localStroage
细看截图里的注释!我将方式一和方式二都截到一张图里了,方式一的是我注释掉的!
方式一:
第一步:深度监视watch:保存数据
watch:{
todos:{
hander:function(value){
window.localStorage.setItem('todos_key', JSON.stringify(value))
}
}
}
第二步:读取数据
在data中读取 todos: JSON.parse(window.localStorage.getItem('todos_key') || '[]')
方式二:数据缓存优化
将数据缓存方法对象封装起来放到util文件夹中的storageUtil.js中;
第一步:storageUtil.js文件
第二步:引入到App.vue文件中
第三步:在watch中存储
第四步:在data中读取: