一、使用的方法和组件：
JSON.parse() 转化JSON格式
window.localStorage.getItem('item' || ‘[]’) 获取item的值如果没有就[]
window.localStorage.setItem() 设置值进入存储
json.stringify(value) 将值转化为String
watch:{} 监视
depp:true， 深度监视
handler传递消息
handler: storageUtil.saveTodos
handler: function (value) {
storageUtil.saveTodos(value)
}
上面的方式== 下面的方式
const 这个定义常量
二、实例代码
项目结构
storageUtil.js
/**
* 使用 Local Storage 存储数据的工具模块
* 1.函数
* 2.对象
* 需要向外暴露一个功能还是多个功能
*
* */
const TODOS_KEY ='todo_key'
export default {
saveTodos (todos) {
window.localStorage.setItem(TODOS_KEY, JSON.stringify(todos))
},
getTodos () {
return JSON.parse(window.localStorage.getItem(TODOS_KEY) ||'[]')
}
}
App.vue
import storageUtilfrom './util/storageUtil'
data () {
return {
todoList: storageUtil.getTodos()
}
},
watch: {
todoList: {
deep:true,
handler: storageUtil.saveTodos
// handler: function (value) {
// storageUtil.saveTodos(value)
// }
}
},
三、demo实现效果：
3.1刷新的时候之前做的操作都还存在
