32、localStorage本地儲存
摘要：
前言：講講localStorage，這個知識點還是很重要的。
GitHub： https://github.com/Ewall1106/mall
1、什麼是localStorage
（1）基本概念
Storage 介面用於指令碼在瀏覽器儲存資料。兩個物件部署了這個...
前言：講講localStorage，這個知識點還是很重要的。
GitHub： ofollow,noindex">https://github.com/Ewall1106/mall
1、什麼是localStorage
（1）基本概念
- Storage 介面用於指令碼在瀏覽器儲存資料。兩個物件部署了這個介面：
window.sessionStorage和window.localStorage。 -
sessionStorage儲存的資料用於瀏覽器的一次會話（session），當會話結束（通常是視窗關閉），資料被清空；localStorage儲存的資料長期存在，下一次訪問該網站的時候，網頁可以直接讀取以前儲存的資料。除了儲存期限的長短不同，這兩個物件的其他方面都一致。
推薦看看阮老師的 教程講解 。
（2）儲存/獲取
- 相對應的簡單操作方法就是一個
setItem和getItem：
window.localStorage.setItem('key', 'value');
window.localStorage.getItem('key')
- 然後就是我們本章要用的一個 儲存JSON物件 的小方法：
// 儲存
let answer = {
qOne: "我最近的傻事",
qTwo: "火鍋",
qThree: "hello"
}
answer = JSON.stringify(this.answer);
localStorage.setItem('answer',answer);
// 取出
let answer = localStorage.getItem('answer');
answer = JSON.parse(answer);
2、專案中使用
- 首先我們在地址新增頁面將地址儲存到本地：
儲存
- 然後我們去地址列表頁面獲取：
獲取
- 就可以有這麼一個效果：
image.gif
3、小結
其實這種實現方式很不好，這章的主要意義還是在於 localStorage 這個知識點的運用，下章我們學著使用 vuex 來進行這個地址狀態的管理。