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、專案中使用

• 首先我們在地址新增頁面將地址儲存到本地：

• 然後我們去地址列表頁面獲取：

• 就可以有這麼一個效果：

3、小結

其實這種實現方式很不好，這章的主要意義還是在於 localStorage 這個知識點的運用，下章我們學著使用 vuex 來進行這個地址狀態的管理。