學習筆記 | 瀏覽器儲存空間：Cookie、LocalStorage 和 SessionStorage
之前在 學習筆記 | 關於 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，前端學習中，歡迎交流討論🧸
