流覽器存儲(cookie、localStorage、sessionStorage)

互聯網早期流覽器是沒有狀態維護，這個就導致一個問題就是伺服器不知道流覽器的狀態，無法判斷是否是同一個流覽器。這樣用戶登錄、購物車功能都無法實現，Lou Montulli在1994年引入到web中最終納入W3C規範 RFC6265中。

區別

cookie在流覽器請求中每次都會附加請求頭中發送給伺服器。大小不能超過4k

localStorage保存資料會一直保存沒有過期時間，不會隨流覽器發送給伺服器。大小5M或更大

sessionStorage僅當前頁面有效一旦關閉就會被釋放。也不會隨流覽器發送給伺服器。大小5M或更大

cookie

流覽器在本地按照一定規則存儲一些文本字串，每當流覽器像伺服器發送請求時帶這些字串。伺服器根據字串判定流覽器的狀態比如：登錄、訂單、皮膚。

伺服器就可以根據不同的cookie識別出不同的使用者資訊。流覽器和伺服器cookie交互圖如下。

cookie如何產生

1、在流覽器訪問伺服器時由伺服器返回一個Set-Cookie回應頭，當流覽器解析這個響應頭時設置cookie

2、通過流覽器js腳本設置 document.cookie = 'name=monsterooo';

流覽器訪問伺服器攜帶cookie過程

js設置cookie詳解

伺服器設置cookie這裡不過多介紹了同用戶端js設置類似，重點來看一下js如何設置cookie和一些細節。

在js中設置cookie完整格式是：document.cookie="key=value[; expires=date][; domain=domain][; path=path][; secure]"

key=value

key設置的是cookie的鍵，value設置的是cookie的值。示例如下：

document.cookie = "name=monsterooo";

expires 設置cookie的生存時間，默認為當然流覽器會話(Session)。當設置一個時間時，每次訪問流覽器會用當前時間和cookie的expries做比對，如果過期cookie則會被刪除。設置格式為GMT時間格式。示例如下：

var t = new Date( +(new Date) + 1000 * 120 ); document.cookie = `name=monsterooo;expires=${t.toGMTString};`;

domain 在流覽器讀取cookie的時候只有當cookie的domain和流覽器當然的功能變數名稱匹配才能讀取到。

預設情況下cookie的domain和當然訪問一樣。但是很多網址不止有一個功能變數名稱比如：a.example.com和b.example.com如果他們想要共用cookie那麼cookie的domain需要設置為domain=.example.com，path路徑需要設置為path=/。這樣之後兩個功能變數名稱都能同時訪問到cookie了。

var t = new Date( +(new Date) + 1000 * 120 ); document.cookie = `name=monsterooo;expires=${t.toLocaleTimeString}; domain=.example.com; path=/`;

path

path路徑和domain功能類似，只是path的範圍更小。path控制cookie在當前功能變數名稱的路徑，只有路徑相匹配cookie才能被讀取到。在www.example.com/order/index.html中cookie設置如下 document.cookie = `order=10; expires=${t.toGMTString}; path=/order`;，那麼只有在/order路徑下的頁面cookie中才會帶有order值。

localStorage和sessionStorage

localStorage和sessionStorage都繼承於Storage，提供了統一的api來訪問和設置資料。api列表為：

clear 清空存儲中的所有本機存放區資料getItem 接受一個參數key，獲取對應key的本機存放區key 接受一個整數索引，返回對應本機存放區中索引的鍵removeItem 接受一個參數key，刪除對應本機存放區的keysetItem 接受兩個參數，key和value，如果不存在則添加，存在則更新。localStorage.setItem('order', 'a109'); console.log(localStorage.key(0)); // order console.log(localStorage.getItem('order')) // a109 localStorage.removeItem('order'); localStorage.clear; // 物件訪問方式同樣有效 localStorage.order = 'b110'; localStorage.order; // b110

擴展