還有一個(gè)問(wèn)題，現(xiàn)在只要我們一刷新瀏覽器，所有item 都沒(méi)了，我們可以使用瀏覽器的 LocalStorage 來(lái)實(shí)現(xiàn)數(shù)據(jù)的持續(xù)性存儲(chǔ)。這樣一來(lái)只要用戶不刪除瀏覽器緩存，我們的 item 會(huì)一直在，當(dāng)然也可以使用數(shù)據(jù)庫(kù)使數(shù)據(jù)更持久存儲(chǔ)，在這里我們用 LocalStorage。
首先來(lái)定義一個(gè)對(duì)象，用于 LocalStorage 存儲(chǔ)和獲取 item 的相關(guān)操作
STORAGE_KEY 用來(lái)區(qū)分存儲(chǔ)到 LocalStorage 的內(nèi)容，因?yàn)?LocalStorage 中可能存儲(chǔ)其它應(yīng)用的數(shù)據(jù)，使用這個(gè) key 用于區(qū)分。
todoStorage 是一個(gè) JavaScript 的對(duì)象，它的屬性是兩個(gè)方法。save 方法把 list 轉(zhuǎn)為 JSON 格式，然后將序列化的數(shù)據(jù)存入對(duì)應(yīng) key 為 STORAGE_KEY 的本地存儲(chǔ)中，fetch 方法則從對(duì)應(yīng) STORAGE_KEY 的本地存儲(chǔ)將之前存入的 todo 數(shù)據(jù)取出并反序列化。注意這里還為 todoStorage 對(duì)象綁定了一個(gè) uid 屬性，它的作用是后續(xù)添加 todo 時(shí)，用于確定新添加 todo 的 id。
因此，每當(dāng)用戶打開(kāi)頁(yè)面時(shí)，我們因?yàn)槿?LocalStorage fetch 一下存儲(chǔ)的數(shù)據(jù)
另外，一旦添加了新的 todo，我們應(yīng)該及時(shí)將新的 todo 存到本地，防止關(guān)閉頁(yè)面而導(dǎo)致數(shù)據(jù)丟失，可以使用 Vue 的 watch 來(lái)監(jiān)聽(tīng)用戶添加item的事件，即監(jiān)視 this.list 的變化，一旦改變，立即修改本地存儲(chǔ)的list 的數(shù)據(jù)
同時(shí)，當(dāng)添加 todo 時(shí)，新的 todo id 不能是從 0 開(kāi)始了，而應(yīng)該從已有 todoStorage.uid 開(kāi)始
奶思！現(xiàn)在可以隨便刷新了~
