一雇寇、使用的方法和組件：
JSON.parse() 轉(zhuǎn)化JSON格式
window.localStorage.getItem('item' || ‘[]’)? 獲取item的值如果沒有就[]
window.localStorage.setItem() 設(shè)置值進(jìn)入存儲(chǔ)
json.stringify(value) 將值轉(zhuǎn)化為String
watch:{} 監(jiān)視
depp:true鸦泳， 深度監(jiān)視
handler傳遞消息
handler: storageUtil.saveTodos
handler: function (value) {
?storageUtil.saveTodos(value)
}
上面的方式== 下面的方式
const 這個(gè)定義常量
二吕漂、實(shí)例代碼
項(xiàng)目結(jié)構(gòu)
storageUtil.js
/**
* 使用 Local Storage 存儲(chǔ)數(shù)據(jù)的工具模塊
* 1.函數(shù)
* 2.對(duì)象
* 需要向外暴露一個(gè)功能還是多個(gè)功能
*
* */
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實(shí)現(xiàn)效果：
3.1刷新的時(shí)候之前做的操作都還存在
