學習筆記 | 瀏覽器儲存空間：Cookie、LocalStorage 和 SessionStorage

Firmbee.com null on Unsplash

之前在 學習筆記 | 關於 Cookie、Session、Token 這篇筆記有提到，瀏覽器需要帶著使用者的身分訊息或經過身分驗證後取得的Token(令牌)，才能向伺服器請求資源，那麼瀏覽器就必須有個空間來儲存這些 Token 資訊，這篇就是要來記錄瀏覽器常見的儲存空間啦～

在 Chrome 的開發者工具內找到 Application，就可以看到瀏覽器的儲存空間 Storage 了，這篇主要記錄最常用的三種：Cookie、LocalStorage 和 SessionStorage

Cookie

Cookie 是小型文字檔，有以下特性：

1. 可以設定失效時間

2. 夾帶在 header 裡，會隨著網路請求一起發送到 server 端

3. 大小約 4kb(儲存量偏小)

4. 操作方式只有一種，所有的新增修改刪除都是同樣寫法

document.cookie = "name=Andy"  // 新增一個cookie 
document.cookie                // 讀取全部cookie 
document.cookie = "name=;"     // 移除name之cookie

Storage

LocalStorage 和 SessionStorage 的概念基本都是相同的，特性是：

1. 大小預設有 5mb，實際會依照瀏覽器不同而有所差異

2. 儲存字串資料，其他類型可用 JSON.stringify()存入，用JSON.parse()取回

3. 無痕或隱私模式下無法讀取

而兩者最大區別在於：

• LocalStorage 如果不手動刪除就會一直保留在瀏覽器內
• SessionStorage 僅會存在當前的頁面，如果關閉瀏覽器或重新整理，資料就會被清除

LocalStorage 和 SessionStorage 的操作也相同，都是以key／value 的方式進行CRUD，這邊就以 LocalStorage 進行操作：

• 存取/修改 setItem()

localStorage.setItem(key,vale)
// key 相當於屬性名稱，value 則是我們要存入的值

ex:​
localStorage.setItem('token','123456')

• 讀取 getItem()

localStorage.getItem(key)
// 讀取時就調用我們先前存入的 key，此時若 Storage 內沒有資料，會回傳 null

ex:​
localStorage.getItem('token')  // '123456'

• 清空 removeItem() / clear()

localStorage.removeItem(key)  // 刪特定資料
localStorage.clear() // 清空所有資料，此時若 Storage 內沒有資料，會回傳 undefined

ex:
localStorage.removeItem('token')  

最後，使用瀏覽器儲存空間要注意的是「安全性問題」，由於這些存取空間只要打開開發者工具就能看到，像 LocalStorage 如果沒有清空，就毫無安全性可言，任何人都可以對其進行修改，使用上務必謹慎！

另外有個小小備註，一開始初學的我認為 SessionStorage 跟 先前的筆記中的 session 是同樣的，所以一直無法理解，後來才發現，原來它們是完全不同的呀！SessionStorage 是瀏覽器端的儲存空間，而 session 則是伺服器端用來儲存使用者狀態的機制，雖然名稱很像但功能不一樣呢😯

參考資料：
Cookie、LocalStorage、SessionStorage 差異
網頁資料儲存 — cookie、local Storage、Session Storage

我是Amber，前端學習中，歡迎交流討論🧸