前端須要瞭解的 Cookies 和 WebStorage

Cookies 和 WebStorage

爲何須要客戶端存儲

• 記錄用戶登陸狀態，當用戶下次訪問時沒必要從新登陸
• 存儲一些用戶對應用的自定義偏好設置，例如主題色、表格每頁默認顯示條數等
• 一些廣告商須要經過客戶端端存儲的一些用戶行爲數據來作一些更個性化的推薦

恰當的利用客戶端存儲能夠很好的優化用戶體驗

Cookies

Cookies 是什麼

Cookies 其實就是網站存儲在客戶端的一些數據
這些數據會自動的被加到網站發起的每一個 HTTP 請求的 Request Header 中
一般狀況下服務端和客戶端均可以對 Cookies 進行 CRUD 操做
點這裏查看 Cookies 協議

如何在前端新增 Cookie

// 最簡單的設置方式 屬性所有采用默認值
document.cookie = 'name=value'
// 自定義 Cookie 屬性
document.cookie = 'test=111; max-age=3600; domain=xx.com; path=/;'
複製代碼

注意一次只能同時新增一個 Cookie

如何在前端修改或刪除 Cookie

// 修改 test 爲 222
document.cookie = 'test=222; max-age=7200; domain=xx.com; path=/'
// 刪除 test
document.cookie = 'test=; max-age=0; domain=xx.com; path=/'
複製代碼

這裏要注意的是要確保 domain 以及 path 與待修改 Cookie 設置的一致
由於 Cookie 實際上是在同一個域名和路徑下惟一
例如咱們訪問 www.a.com/test/xx.html
能夠同時存在 test=1; domain=a.com; path=/test 以及 test=1; domain=a.com; path=/
這倆個 name 相同可是 path 不一樣的同名 Cookie
因此只有 name domain path 這三個值都相同時才能肯定一個 Cookie

如何讀取 Cookie

經過 document.cookie 獲取到的是全部數據
相似 name1=value1; name2=value2 的字符串
要拿來使用的話還需經過一系列字符串操做將須要的值取出

如何判斷 Cookie 是否啓用

因爲 Cookie 涉及到用戶的隱私，用戶能夠手動禁止瀏覽器使用 Cookie
絕大多數瀏覽器均可以經過如下代碼來判斷用戶是否禁用 Cookie

navigator.cookieEnabled
複製代碼

Ps: 經本人測試 禁用 Cookie 後 Github 淘寶 等都沒法正常訪問
感受如今大多數用戶都不會去禁用 Cookie，否則會有一堆網站訪問不了

關於 Cookie 的屬性

• domain
  指定 Cookie 存儲在哪一個域名下 默認爲當前服務器的域名
  固然也遵循同源策略 例如在 www.son.a.com 頁面下
  咱們能夠設置 Cookie 的 domain 爲 a.com
  這樣在 www.another.a.com 頁面也能夠獲取到該 Cookie
  可是不能在該頁面試圖去操做 domain 爲 b.com 的 Cookie
• path
  指定 Cookie 存儲在哪一個路徑下 默認爲當前 URI 中的路徑
  例如在 www.a.com/page/one.html 咱們按默認屬性設置了一個Cookie
  那麼在 www.a.com/page/two.html www.a.com/page/son/three.html
  這些頁面下均可以獲取這個 Cookie
  可是在 www.a.com/another/four.html 頁面上便沒法獲得這個 Cookie
  能夠將 path 設爲 / 使得訪問當前域名下全部路徑的網頁都能拿到設置的 Cookie
• max-age 最大存儲時間 以秒爲單位 默認當瀏覽器 Session 結束時清除
• expires 存儲失效的 GMT 時間 默認當瀏覽器 Session 結束時清除
• secure 包含該屬性的 Cookie 只能經過 HTTPS 傳輸
• httponly
  只能在服務端進行設置
  包含該屬性的 Cookie 只會在 Request Headers 中出現
  前端沒法經過 document.cookie 查看修改

關於 Cookie 中的保留字符

因爲 ; , 空格 在 Cookie 中有特殊含義
因此當存儲的數據中包含這些特殊字符時
須要在存儲前經過 encodeURIComponent 進行編碼
讀取前經過 decodeURIComponent 進行解碼

Cookie 的優缺點

優勢：

• 適合用於存放須要每一個請求都必須攜帶的數據
• 服務端也能夠直接操做 Cookie
• 能夠經過 domain 以及 path 控制數據存儲的範圍

缺點：

• 容量有限，規範只要求每一個域名下最低提供 4kb 的存儲空間
• 每次請求都會攜帶，若是存放了大量沒必要要的數據很顯然會影響頁面性能
• 不安全，永遠不要在 Cookie 中存放用戶的敏感數據
• 前端 API 不友好，CRUD 都是經過 document.cookie 進行，沒有提供相關操做的方法

WebStorage

WebStorage 是什麼

WebStorage 是 HTML5 新增的客戶端存儲機制
分爲 LocalStorage 以及 SessionStorage
IE8+ 以及各現代瀏覽器對其都有良好的支持
點這裏查看 WebStorage 規範

LocalStorage

永久存儲（除非瀏覽器緩存被清除）在當前域下，遵循同源策略
若是在一個瀏覽器打開多個窗口訪問同一域名的網站
那麼這多個窗口中的 LocalStorage 是共享的

SessionStorage

存儲週期爲當前 Session ，一樣遵循同源策略
要注意這裏的 Session 和 Cookie 的默認存儲 Session 不一樣
SessionStorage 針對的是瀏覽器的每一個窗口，而不是整個瀏覽器的進程
正因如此，與 LocalStorage 不一樣的是，多個窗口下的同域名網站，其 SessionStorage 也是分開存儲的
Ps：要注意的是若是在一個窗口內訪問的網站經過 <iframe> 內嵌了倆個同域名網站
那麼這倆個 <iframe> 內嵌站點的 SessionStorage 是共享的

API

// sessionStorage 與 localStorage 一致
localStorage.a = 'test1' // 新增或修改
localStorage.a // 讀取
localStorage['a'] // 讀取

localStorage.setItem(a, 'test3') // 新增
localStorage.getItem(a) // 讀取
localStorage.removeItem(a) // 刪除
localStorage.clear() // 清空全部
localStorage.key(index) // 獲取指定 index 存儲鍵值對的 key
localStorage.length // 總共存儲的鍵值對數量
複製代碼

能夠看到經過相似操做普通對象同樣來操做 WebStorage
一般來講這種方式更爲簡潔
可是也有相似 clear() removeItem() 等操做只能經過 API 進行

Storage Event

WebStorage 還提供了事件機制，用於監聽存儲發生的變化
當打開倆個窗口訪問同域網站，若是在其中一個窗口中修改了存儲數據
在另外一個窗口中能夠經過以下代碼監聽到存儲改變的事件

window.addEventListener('storage', e => {
	/** e: { key, // 發生改變的 key newValue, // 舊值 oldValue, // 新值 url, // 觸發變化的文檔 URL ... } */
})
複製代碼

要注意的是這個事件只有在本地存儲真的發生變化時纔會觸發
也就是說假設已經經過 localStorage.a = 'test' 設置了本地存儲中 a 的值爲 test
那麼再次執行 localStorage.a = 'test' 並不會觸發事件
而且經過 localStorage.removeItem('notExist') 試圖移除一個不存在的屬性時也不會觸發事件
Ps:（因爲 SessionStorage 是基於瀏覽器窗口存儲，因此只有當使用 <iframe> 處理內嵌頁面時纔可能會觸發事件）
這個機制能夠用於實現應用的廣播功能，當用戶在一個窗口的頁面進行操做時同步對另外一個窗口的頁面作出修改
例如用戶在一個窗口中修改了應用的主題色，咱們經過 localStorage.color = 'red' 來保存這一改變
另外一個窗口經過監聽到 localStorage 的變化同步的將應用的主題色也修改成 red

WebStorage 的優點

• 每一個域下容許存儲超過 5MB 的數據（各個瀏覽器有所不一樣）
• 更友好的 API

其它注意事項

• 不論是 Cookies 仍是 WebStorage 都是與瀏覽器相關的
  也就意味着在 Chrome 瀏覽器中存儲的數據，當用戶切換爲 FireFox 瀏覽時就沒法獲取
  固然這應該是小几率事件，畢竟大多數人習慣於使用同一種瀏覽器
• 當瀏覽器設置 Cookie 失敗時並不會報錯，這個過程是靜默的
  例如當你試圖跨域的去設置 Cookie 時只會發現不生效，但不會在控制檯中看到相應錯誤信息
• 雖然 WebStorage 的規範但願能支持對相似數組對象等結構化數據進行存儲
  但目前爲止大多數瀏覽器僅支持字符串做爲 Value
  傳入非字符串的值會被強制轉化爲字符串
  例如試圖經過 localStorage.o = {a: 1} 存儲一個對象
  會發現實際存儲的是 o: "[object Object]"

---

（End）