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, // 發生改變的 keynewValue, // 舊值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）

總結

以上是生活随笔為你收集整理的前端需要了解的 Cookies 和 WebStorage的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。