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

1.1 概述

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

localStorage：該對象存儲的數(shù)據(jù)沒有時間限制；

sessionStorage : 該對象存儲的數(shù)據(jù)僅用于瀏覽器的一次對話，當對話結束（通常是窗口關閉），數(shù)據(jù)被清空；

1.2 特性

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

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

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

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

使用Web Stroage的API進行數(shù)據(jù)存儲是，只能存儲為字符串數(shù)據(jù)，因此所以數(shù)據(jù)在寫入時會隱式調用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不支持)；

超出存儲容量的處理；

避免敏感信息存入Web Storage，要注意[XXS]()的注入風險

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

優(yōu)勢

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

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

接口更加易用

局限性

server端無法獲取本地數(shù)據(jù)，如有需求，可通過post/get方法；

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

1.4 接口

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

存儲數(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)聽
當存儲的數(shù)據(jù)發(fā)生變化時，會觸發(fā)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)

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

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

1.5 實戰(zhàn)

//html



  
  


  網(wǎng)站名：
  

  網(wǎng)站地址：
  

  確認
  

  網(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原意是小甜餅，是服務器保存在瀏覽器的一小段文本信息，屬于其中一種互聯(lián)網(wǎng)存儲機制。

2.1 Cookie特點

每個Cookie大小一般不超過4KB;

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

瀏覽器每次向服務器發(fā)出請求，會在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
寫入Cookie

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

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:規(guī)定cookie的值，形式是鍵值對；
expires:規(guī)定cookie過期時間，格式為形式為expires = someDate.toGMTString()；
domain:指定cookie所在的域名，只有訪問的域名匹配domain屬性，cookie才會發(fā)送到服務器；
path:指定路徑，只有path屬性匹配向服務器發(fā)送的路徑，cookie才會發(fā)送，只要path屬性匹配發(fā)送路徑的一部分，都可以發(fā)送；
secure:指定cookie只能在加密協(xié)議HTTPS下發(fā)送到服務器；
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的聯(lián)系與區(qū)別


特性
cookie
Web Storag



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


存儲空間
一般為4K
一般5MB~10MB


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


應用場景
用戶登錄身份驗證（結合HttpOnly相對安全性高）
保存用戶購物車信息以及HTML5游戲的本地存儲




參考資料

HTML5?Web 存儲

八一下LocalStorage本地存儲的卦——AlloyTeam

Web Storage API——MDN

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

Cookie——阮一峰

詳說 Cookie, LocalStorage 與 SessionStorage