摘要：源自阮一峰具體什么意思，請(qǐng)看下面的截圖就一目了然表示對(duì)象的的數(shù)量實(shí)戰(zhàn)網(wǎng)站名網(wǎng)站地址確認(rèn)網(wǎng)站名查詢機(jī)制原意是小甜餅，是服務(wù)器保存在瀏覽器的一小段文本信息，屬于其中一種互聯(lián)網(wǎng)存儲(chǔ)機(jī)制。

1.1 概述

Web Storage是HTML5提供的一種新的瀏覽器端數(shù)據(jù)儲(chǔ)存機(jī)制，它提供兩種數(shù)據(jù)存儲(chǔ)的對(duì)象：

localStorage：該對(duì)象存儲(chǔ)的數(shù)據(jù)沒(méi)有時(shí)間限制；

sessionStorage : 該對(duì)象存儲(chǔ)的數(shù)據(jù)僅用于瀏覽器的一次對(duì)話，當(dāng)對(duì)話結(jié)束（通常是窗口關(guān)閉），數(shù)據(jù)被清空；

1.2 特性

localStorage 和 sessionStorage對(duì)象都是構(gòu)造函數(shù)Storage的實(shí)例，擁有同樣的屬性和方法，二者唯一的區(qū)別是存儲(chǔ)數(shù)據(jù)的期限不一；

localStorage和sessionStorage這兩個(gè)對(duì)象相較于cookie的存儲(chǔ)機(jī)制，能夠提供更大的數(shù)據(jù)存儲(chǔ)空間，但是存儲(chǔ)空間根據(jù)瀏覽器類型而定，一般Chrome是2.5MB、Firefox和Opera是5MB、IE是10MB；

目前現(xiàn)代瀏覽器均支持web存儲(chǔ)，但I(xiàn)E 7-是不支持的，依舊采用傳統(tǒng)的cookie保持信息；
檢測(cè)瀏覽器是否支持web存儲(chǔ)的方法有：

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

使用Web Stroage的API進(jìn)行數(shù)據(jù)存儲(chǔ)是，只能存儲(chǔ)為字符串?dāng)?shù)據(jù)，因此所以數(shù)據(jù)在寫(xiě)入時(shí)會(huì)隱式調(diào)用toString方法轉(zhuǎn)換為字符串；

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

【注意事項(xiàng)】

使用前要判斷瀏覽器是否支持Web Stroage(無(wú)痕模式和低版本的IE不支持)；

超出存儲(chǔ)容量的處理；

避免敏感信息存入Web Storage，要注意[XXS]()的注入風(fēng)險(xiǎn)

1.3 優(yōu)勢(shì)與局限性

優(yōu)勢(shì)

存儲(chǔ)空間大：與cookie的4k存儲(chǔ)空間相比，Web Storage雖然不同瀏覽器的標(biāo)準(zhǔn)可能不一樣，主流的一般都在5~10M；

頁(yè)面性能優(yōu)化：本地存儲(chǔ)的數(shù)據(jù)不會(huì)被發(fā)到服務(wù)器，與cookie相比，節(jié)省帶寬，加快響應(yīng)速度

接口更加易用

局限性

server端無(wú)法獲取本地?cái)?shù)據(jù)，如有需求，可通過(guò)post/get方法；

只能同源共享數(shù)據(jù)；

1.4 接口

由于localStorage和sessionStorage對(duì)象的屬性和方法是基本一致，下面以localStorage為例，講解一下localStorage對(duì)象的接口；

存儲(chǔ)數(shù)據(jù)

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

讀取數(shù)據(jù)

//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"

刪除數(shù)據(jù)

//method 1 
localStorage.removeItem("key")//刪除特定的key
//method 2
localStorage.clear()//刪除所有的數(shù)據(jù)

獲取特定索引的key

localStorage.key(index)

事件監(jiān)聽(tīng)
當(dāng)存儲(chǔ)的數(shù)據(jù)發(fā)生變化時(shí)，會(huì)觸發(fā)storage事件，我們可以通過(guò)以下代碼了解storage的事件對(duì)象包含哪些屬性

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)

注意，該事件不在導(dǎo)致數(shù)據(jù)變化的當(dāng)前頁(yè)面觸發(fā)。如果瀏覽器同時(shí)打開(kāi)一個(gè)域名下面的多個(gè)頁(yè)面，當(dāng)其中的一個(gè)頁(yè)面改變sessionStorage或localStorage的數(shù)據(jù)時(shí)，其他所有頁(yè)面的storage事件會(huì)被觸發(fā)，而原始頁(yè)面并不觸發(fā)storage事件。可以通過(guò)這種機(jī)制，實(shí)現(xiàn)多個(gè)窗口之間的通信。所有瀏覽器之中，只有IE瀏覽器除外，它會(huì)在所有頁(yè)面觸發(fā)storage事件。（源自阮一峰）
具體什么意思，請(qǐng)看下面的截圖就一目了然：

localStorage.length表示localStorage對(duì)象的key的數(shù)量

1.5 實(shí)戰(zhàn)

//html



  
  


  網(wǎng)站名：
  

  網(wǎng)站地址：
  

  確認(rèn)
  

  網(wǎng)站名：
  

  

  查詢


//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

Cookie原意是小甜餅，是服務(wù)器保存在瀏覽器的一小段文本信息，屬于其中一種互聯(lián)網(wǎng)存儲(chǔ)機(jī)制。

2.1 Cookie特點(diǎn)

每個(gè)Cookie大小一般不超過(guò)4KB;

Cookie保存的信息包括Cookie名、Cookie值、到期時(shí)間、所屬域名和生效路徑；

瀏覽器每次向服務(wù)器發(fā)出請(qǐng)求，會(huì)在Http請(qǐng)求頭上帶上Cookie信息；

2.2 Cookie API

瀏覽器可以設(shè)置拒絕Cookie

window.navigator.cookieEnabled = false;

獲取當(dāng)前頁(yè)面的所有Cookie

    var allCookies = document.cookie
    //document.cookie返回的是分號(hào)分隔的所有cookie，如要取得每個(gè)cookie的值，可使用
    var cookies = document.cookie.split(";");
    for (var i=0;i
寫(xiě)入Cookie

document.cookie =  "name=teren";
//document.cookie一次只能寫(xiě)一個(gè)cookie，而且是寫(xiě)入而不是覆蓋；
[疑問(wèn)]為什么讀取cookie是全部，而寫(xiě)入則是一個(gè)一個(gè)呢？
這與瀏覽器和服務(wù)器之間的cookie通信格式相關(guān)。
瀏覽器向服務(wù)器發(fā)送cookie時(shí)，是將所有cookie一起發(fā)送；

GET /sample_page.html HTTP/1.1
Host: www.example.orgCookie: cookie_name1=cookie_value1; cookie_name2=cookie_value2Accept: */*
服務(wù)器告訴瀏覽器需要存儲(chǔ)cookie時(shí)，則是分行設(shè)定

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的簡(jiǎn)便方法就是設(shè)置expires = 0或者是過(guò)期時(shí)間，如expires = Thu,01-Jan-1970 00:00:01 GMT

cookie的屬性

Set-Cookie: value[;expires = date][;domain = domain][;path = path][;secure][;HttpOnly]
value:規(guī)定cookie的值，形式是鍵值對(duì)；
expires:規(guī)定cookie過(guò)期時(shí)間，格式為形式為expires = someDate.toGMTString()；
domain:指定cookie所在的域名，只有訪問(wèn)的域名匹配domain屬性，cookie才會(huì)發(fā)送到服務(wù)器；
path:指定路徑，只有path屬性匹配向服務(wù)器發(fā)送的路徑，cookie才會(huì)發(fā)送，只要path屬性匹配發(fā)送路徑的一部分，都可以發(fā)送；
secure:指定cookie只能在加密協(xié)議HTTPS下發(fā)送到服務(wù)器；
HttpOnly:設(shè)置cookie不能被js讀取，這主要是放置XSS攻擊盜取cookie;
一個(gè)完整的瀏覽器設(shè)置cookie寫(xiě)法：
document.cookie = "name=teren;"
+"expires = Thu,01-Jan-1970 00:00:01 GMT"
+"domain = terenyeung.com;"
+"path = /;"
+"secure;"
+"HttpOnly"
3.Web Storage和Cookie的聯(lián)系與區(qū)別


特性
cookie
Web Storag



數(shù)據(jù)生命周期
服務(wù)器生成的話，為指定失效時(shí)間；瀏覽器段生成的話默認(rèn)為關(guān)閉瀏覽器后
localStorage永久有效，除非使用localStorage.clear()清空；sessionStorage為關(guān)閉瀏覽器后；


存儲(chǔ)空間
一般為4K
一般5MB~10MB


與服務(wù)器通信
每次攜帶在HTTP頭中
僅在客戶端，如需通信，可通過(guò)get或post方法


應(yīng)用場(chǎng)景
用戶登錄身份驗(yàn)證（結(jié)合HttpOnly相對(duì)安全性高）
保存用戶購(gòu)物車信息以及HTML5游戲的本地存儲(chǔ)




參考資料

HTML5?Web 存儲(chǔ)

八一下LocalStorage本地存儲(chǔ)的卦——AlloyTeam

Web Storage API——MDN

Web Storage：瀏覽器端數(shù)據(jù)儲(chǔ)存機(jī)制——阮一峰

Cookie——阮一峰

詳說(shuō) Cookie, LocalStorage 與 SessionStorage