瞭解瀏覽器的臨時儲存和永久儲存（cookie、localStorage、sessionStorage）

 

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

 

區別

• cookie在瀏覽器請求中每次都會附加請求頭中發送給服務器。用戶代理(一般值瀏覽器)所實現的大小最少要到達4096字節

• 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，刪除對應本地存儲的key
• setItem 接受兩個參數，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