用戶端存儲
在目前的現代浏覽器中主要有以下幾種存儲方案
1.cookie
2.localStorage
3.sessionStorage
4.indexDB
Cookie
Cokkie 定義
Cookie 是用戶端存儲資料的選項之一，它主要用于用戶端存儲會話資訊。
它是由伺服器在響應 HTTP 請求時，通過發送 Set-Cookie HTTP 頭部包含的會話資訊。
浏覽器将會話資訊存儲起來，并在之後的每一個請求中攜帶Cookie 資料傳回給 伺服器，來做唯一辨別通信。
Cookie 限制
Cookie 是與特定域綁定的。這個限制可以保證隻對指定的接受者開放，不能被其它人通路。
Cookie 通常 遵循的限制規則：
-
- 不能超過300個Cookie
-
- 每個Cookie 不能超過4096 位元組
-
- 每個域不能超過 20 個 Cookie
-
- 每個域不能超過 81920 位元組
如果 Cookie 總數超過了 單個域的 上限，浏覽器會删除之前的Cookie。
不同浏覽器表現不一樣
- IE 和 Opera 會按照最近最少使用的原則删除之前的Cookie.
- Firefoxs 随機删除之前的 Cookie
如果建立的Cookie 位元組超過了最大限制，則Cookie 會被删除。
Cookie 構成
| 名稱 | 屬性 |
|---|---|
| 名稱 [ name ] | cookie 唯一辨別名稱，不區分大小寫，建議小寫。 |
| 值 [ value ] | 存儲在 cookie 字元串值 |
| 域 [ Domain] | cookie 有效域的通路。 |
| 路徑 [Path=PATH] | 指定哪些路由路徑必須包含cookie 才可以通路 |
| 過期時間 [Expres=DATE] | 表示cookie 什麼時候被删除。預設情況下(不設定過期時間)，浏覽器在關閉時，cookie都會删除 |
| 安全标 [Secure ] | 設定之後，隻在使用SSL安全連結情況下才會把cookie 發送給伺服器。 |
| 讀取cookie [HttpOnly] | 設定後隻能在伺服器上讀取，不能再通過JavaScript讀取Cookie |
缺點
- 容量問題：有上限，最大隻能有 4KB
- 性能問題：同一個域名下的所有請求，都會攜帶 Cookie，某些請求（a,img,link等标簽發出的請求）可能不需要此cookie，會加大傳輸的頭部，損耗一定時空開銷
- 安全問題：用戶端可以通過一定手段（腳本，devtools，本地存儲的檔案，修改host檔案）擷取到，存在XSS,CSRF等安全問題
解決安全問題的方案
- 減短cookie的有效時間
- 添加HttpOnly屬性：防止本地腳本讀取cookie
- 服務端對傳送的cookie加密
- 添加Secure屬性：使用https協定傳輸
- 設定samesite屬性為需要的值：嚴格卡控cookie的攜帶範圍
Web Stronge
Web Stronge 的出現 主要是解決 cookie 的問題，存儲不需要頻繁發送服務端的資料。
它提供了 跨會話 持久化存儲大量資料的機制。
Web Stronge 中 定義了兩個對象
| localStronge | 永久存儲 |
|---|---|
| sessionStronge | 會話存儲 |
Stronge 提供的 方法
clear( ): 删除所有制
getItem( ): 擷取指定name 值
removeItem( ) : 删除給定 name 鍵值對
setItem( ) : 設定給定name 值
優點
- 存儲容量大:不同浏覽器，存儲容量可以達到 5-10M，針對一個域名
- 存儲于用戶端，不會服務端發生通信
缺點
- 隻能存儲字元串，JSON對象需要轉換為json string 存儲
- 隻适用于存儲少量簡單資料
- localStorage需要手動删除
sessionStronge
sessionStronge 對象隻存儲會話資料，當頁面關閉時，意味着會話結束，那麼資料會清空。當頁面 重新整理 / 崩潰 時，資料還會儲存在浏覽器中，
使用 sessionStronge
// 設定會話key-value
// 屬性存儲資料
sessionStorage.name = '前端自學社群'
// 方法存儲資料
sessionStorage.setItem('title', '測試'）
// 擷取指定name值
sessionStorage.getItem('name')
// 删除會話資料
// 删除所有sessionStronge
sessionStorage.clear
// 删除指定key
sessionStorage.removeItem('name'）
// 擷取sessionStronge 個數
sessionStorage.length
複制
localStronge
本地資料持久化，永久的儲存在浏覽器中，除非主動删除。
由于它 是 Stronge 的執行個體， 它擁有 Stronge 所有的方法，用法和 sessionStronge 一樣。
IndexedDB
運作在浏覽器上的非關系型資料庫
依舊受同源政策限制
學習資源
本文将不講述了，日常開發用的少。
- [使用 IndexedDB] : https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API/Using_IndexedDB
- [浏覽器資料庫 IndexedDB 入門教程] : http://www.ruanyifeng.com/blog/2018/07/indexeddb.html
參考
- 《JavaScript 進階程式設計第四版》
- MDN 資源
