左手Cookie「小甜餅」，右手Web Storage

時間 2019-12-12

標籤左手 cookie 甜餅右手 web storage 欄目 HTML 简体版

原文原文鏈接

localStorage和sessionStorage這兩個對象相較於cookie的存儲機制，可以提供更大的數據存儲空間，可是存儲空間根據瀏覽器類型而定，通常Chrome是2.5MB、Firefox和Opera是5MB、IE是10MB；web
目前現代瀏覽器均支持web存儲，但IE 7-是不支持的，依舊採用傳統的cookie保持信息；
檢測瀏覽器是否支持web存儲的方法有：瀏覽器

//method 1
window.localStorage && window.localStorage.getItem
//method 2
if (typeOf(Storage) !== 'undefined'){
    //support Web Storage
}else{
}

使用Web Stroage的API進行數據存儲是，只能存儲爲字符串數據，所以因此數據在寫入時會隱式調用toString方法轉換爲字符串；安全

var data = {
  name:'teren',
  age:18
}
localStorage.setItem('data',data);
console.info(localStorage.data);
localStorage.setItem('realData',JSON.stringify(data));
console.info(localStorage.realData)

【注意事項】性能優化

使用前要判斷瀏覽器是否支持Web Stroage(無痕模式和低版本的IE不支持)；服務器
超出存儲容量的處理；cookie
避免敏感信息存入Web Storage，要注意[XXS]()的注入風險

1.3 優點與侷限性

優點

存儲空間大：與cookie的4k存儲空間相比，Web Storage雖然不一樣瀏覽器的標準可能不同，主流的通常都在5~10M；
頁面性能優化：本地存儲的數據不會被髮到服務器，與cookie相比，節省帶寬，加快響應速度
接口更加易用

侷限性

server端沒法獲取本地數據，若有需求，可經過post/get方法；
只能同源共享數據；

1.4 接口

因爲localStorage和sessionStorage對象的屬性和方法是基本一致，下面以localStorage爲例，講解一下localStorage對象的接口；

存儲數據

//method 1
localStorage.setItem('key','value');
//method 2
localStorage.key = value

讀取數據

//method 1
localStorage.getItem('key')
//method 2 
localStorage.key

localStorage.setItem('name','teren')
console.log(localStorage.name)
localStorage.age = 12
console.log(localStorage.age)
localStorage.getItem('name'

刪除數據

//method 1 
localStorage.removeItem('key')//刪除特定的key
//method 2
localStorage.clear()//刪除全部的數據

獲取特定索引的key

localStorage.key(index)

事件監聽
當存儲的數據發生變化時，會觸發storage事件，咱們能夠經過如下代碼瞭解storage的事件對象包含哪些屬性

function setData(key,value){
  localStorage.setItem(key,value)
};
setData('name','teren')
setData('first','kobe')
window.addEventListener('storage',function(e){

  console.log(e.oldValue);
  console.log(e.newValue);
  console.log(e.url)
},false)

注意，該事件不在致使數據變化的當前頁面觸發。若是瀏覽器同時打開一個域名下面的多個頁面，當其中的一個頁面改變sessionStorage或localStorage的數據時，其餘全部頁面的storage事件會被觸發，而原始頁面並不觸發storage事件。能夠經過這種機制，實現多個窗口之間的通訊。全部瀏覽器之中，只有IE瀏覽器除外，它會在全部頁面觸發storage事件。（源自阮一峯）

具體什麼意思，請看下面的截圖就一目瞭然：

localStorage.length表示localStorage對象的key的數量

1.5 實戰

//html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  網站名：<input type="text" id="website">
  <br>
  網站地址：<input type="text" id="url">
  <br>
  <button id='confirm'>確認</button>
  <hr>
  網站名：<input type="text">
  <br>
  <div id="list"></div>
  <button id="search" autocomplete>查詢</button>
</body>
</html>
//js
(function(){
  var confirm = document.getElementById('confirm')
var search = document.getElementById('search')
var website = document.getElementById('website')
var url = document.getElementById('url')
var list = document.getElementById('list')

confirm.addEventListener('click',function(e){
  localStorage.setItem('website',url.value)
  console.log(localStorage.website)  
});

search.addEventListener('click',function(e){
 document.getElementById('list').innerHTML = localStorage.getItem('website')
  console.log(list,innerHTML)
});
})();

demo

2.Cookie機制

Cookie原意是小甜餅，是服務器保存在瀏覽器的一小段文本信息，屬於其中一種互聯網存儲機制。

2.1 Cookie特色

每一個Cookie大小通常不超過4KB;
Cookie保存的信息包括Cookie名、Cookie值、到期時間、所屬域名和生效路徑；
瀏覽器每次向服務器發出請求，會在Http請求頭上帶上Cookie信息；

2.2 Cookie API

瀏覽器能夠設置拒絕Cookie

window.navigator.cookieEnabled = false;

獲取當前頁面的全部Cookie

var allCookies = document.cookie
    //document.cookie返回的是分號分隔的全部cookie，如要取得每一個cookie的值，可以使用
    var cookies = document.cookie.split(';');
    for (var i=0;i<cookies.length;i++){
        console.log(cookies[i])
    }

寫入Cookie

document.cookie =  'name=teren';
//document.cookie一次只能寫一個cookie，並且是寫入而不是覆蓋；

[疑問]爲何讀取cookie是所有，而寫入則是一個一個呢？
這與瀏覽器和服務器之間的cookie通訊格式相關。

瀏覽器向服務器發送cookie時，是將全部cookie一塊兒發送；

GET /sample_page.html HTTP/1.1
Host: www.example.orgCookie: cookie_name1=cookie_value1; cookie_name2=cookie_value2Accept: */*

服務器告訴瀏覽器須要存儲cookie時，則是分行設定

HTTP/1.0 200 OKContent-type: text/htmlSet-Cookie: cookie_name1=cookie_value1Set-Cookie: cookie_name2=cookie_value2; expires=Sun, 16 Jul 3567 06:23:41 GMT

刪除cookie
刪除cookie的簡便方法就是設置expires = 0或者是過時時間，如expires = Thu,01-Jan-1970 00:00:01 GMT

cookie的屬性

Set-Cookie: value[;expires = date][;domain = domain][;path = path][;secure][;HttpOnly]

value:規定cookie的值，形式是鍵值對；
expires:規定cookie過時時間，格式爲形式爲expires = someDate.toGMTString()；
domain:指定cookie所在的域名，只有訪問的域名匹配domain屬性，cookie纔會發送到服務器；
path:指定路徑，只有path屬性匹配向服務器發送的路徑，cookie纔會發送，只要path屬性匹配發送路徑的一部分，均可以發送；
secure:指定cookie只能在加密協議HTTPS下發送到服務器；
HttpOnly:設置cookie不能被js讀取，這主要是放置XSS攻擊盜取cookie;

一個完整的瀏覽器設置cookie寫法：

document.cookie = 'name=teren;'
+'expires = Thu,01-Jan-1970 00:00:01 GMT'
+'domain = terenyeung.com;'
+'path = /;'
+'secure;'
+'HttpOnly'

3.Web Storage和Cookie的聯繫與區別

特性	cookie	Web Storag
數據生命週期	服務器生成的話，爲指定失效時間；瀏覽器段生成的話默認爲關閉瀏覽器後	localStorage永久有效，除非使用localStorage.clear()清空；sessionStorage爲關閉瀏覽器後；
存儲空間	通常爲4K	通常5MB~10MB
與服務器通訊	每次攜帶在HTTP頭中	僅在客戶端，如需通訊，可經過get或post方法
應用場景	用戶登陸身份驗證（結合HttpOnly相對安全性高）	保存用戶購物車信息以及HTML5遊戲的本地存儲