[JS] localStorage 怎麼用？和Cookie、Session Storage差在哪？

前言

localStorage在許多網站上很常會應用到，這篇會來整理localStorage的用法，另外會比較Cookie和Session Storage。

localStorage 是什麼呢？

localStorage 是什麼呢？ 一個可以儲存資料的儲藏室，當重新整理瀏覽器資料不會消失。購物網站上常常會有你最近看過的商品，再次出現在網站上，最近收尋過的關鍵字等等，便是使用localStorage的方式。

localStorage會在同一個網址文件(Document)底下存資料。儲存資料並無到期的限制。

從開發者工具的Application中可以查看Local Storage儲存的資料。

儲存到 Local Storage

// 可以設定儲存的資料名稱Key和值Value
localStorage.setItem('Key', Value);

// 儲存值為字串形式，若值為物件則可用JSON.stringify(data)轉為字串
localStorage.setItem('Key', JSON.stringify(data));

取得 Local Storage 資料

localStorage.getItem('Key');

// 取得物件資料時 則可用JSON.parse(localStorage.getItem('Key'))轉為物件

刪除 Local Storage 資料

localStorage.removeItem('Key');

清空 Local Storage 資料

localStorage.clear();

Local Storage、Session Storage和Cookie的差異

這三者都會在同一個網址文件(Document)底下存資料。

Local Storage

1. 是否隨著 http req/res：No
   被限制在該網站的規範內，其他網站無法存取。
2. 生命期限: 無限制
   儲存資料並無到期的限制，目前瀏覽器頁面被關閉時不會被清除。
3. 儲存位置：Browser Only
4. 可取範圍(accessible from)：Any window of browser
5. 資料儲存量：10mb 左右

Session Storage

1. http req/res：No
   被限制在該網站的規範內，其他網站無法存取。
2. 生命期限: On Tab close
   SessionStorage 的儲存資料於目前瀏覽頁狀態結束的同時將一併被清除 — 也就是目前瀏覽器頁面被關閉時或是還原頁面時。
3. 儲存位置：Browser Only
4. 可取範圍(accessible from)：Same Tab
5. 資料儲存量：5mb 左右

與LocalStorage語法一樣

// 將資料存到sessionStorage
sessionStorage.setItem('key', 'value');

// 從sessionStorage取得之前存的資料
var data = sessionStorage.getItem('key');

// 從sessionStorage移除之前存的資料
sessionStorage.removeItem('key');

// 從sessionStorage移除之前存的所有資料
sessionStorage.clear();

Cookie

cookie 是在瀏覽器端一個儲存少量資料的空間。當瀏覽器與server 互動時 cookie 就會隨著 http request / response 來回傳送。
通常由伺服器透過 Set-Cookie header 傳遞給瀏覽器。瀏覽器收到後會將 cookie 儲存起來，並在之後的請求回傳 cookie 至同樣的伺服器。可以應用於網站後台驗證、追蹤使用者行為及廣告上。

1. http req/res：Yes
2. 生命期限: 用戶/server 手動設定
3. 儲存位置：Browser and Server
4. 可取範圍(accessible from)：Any window of browser
5. 資料儲存量：4kb 左右

document.cookie = "yummy_cookie=choco"; 
document.cookie = "tasty_cookie=strawberry"; 
console.log(document.cookie); 
// logs "yummy_cookie=choco; tasty_cookie=strawberry"

更詳盡的使用方法，這篇主要是整理LocalStorage，cookie的部分就先不整理。更多關於cookie可參考什麼是 Cookie？如何用 JS 讀取/修改 document.cookie?

LocalStorage 實例

之前在Udemy上課時，製作的一個電影院座位選位的小程式，使用localStorage 存儲已選的座位與電影。

• DEMO

參考資料

• MDN - Window.localStorage
• MDN - Using HTTP cookies
• 重要的基礎：Cookie v.s Session Storage v.s Local Storage And Cookie-based v.s Token-based Authentication
• 什麼是 Cookie？如何用 JS 讀取/修改 document.cookie?