目錄
1. Web Storage
2. Cookie機(jī)制
3. 二者的聯(lián)系與區(qū)別
1.Web Storage
1.1 概述
Web Storage是HTML5提供的一種新的瀏覽器端數(shù)據(jù)儲(chǔ)存機(jī)制焊虏，它提供兩種數(shù)據(jù)存儲(chǔ)的對(duì)象：
localStorage：該對(duì)象存儲(chǔ)的數(shù)據(jù)沒有時(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ù)在寫入時(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(無痕模式和低版本的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ōu)化：本地存儲(chǔ)的數(shù)據(jù)不會(huì)被發(fā)到服務(wù)器，與cookie相比猖任，節(jié)省帶寬你稚，加快響應(yīng)速度
- 接口更加易用
局限性
- server端無法獲取本地?cái)?shù)據(jù)，如有需求，可通過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)聽
當(dāng)存儲(chǔ)的數(shù)據(jù)發(fā)生變化時(shí)盈滴，會(huì)觸發(fā)storage事件涯肩，我們可以通過以下代碼了解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)前頁面觸發(fā)巢钓。如果瀏覽器同時(shí)打開一個(gè)域名下面的多個(gè)頁面病苗，當(dāng)其中的一個(gè)頁面改變sessionStorage或localStorage的數(shù)據(jù)時(shí)，其他所有頁面的storage事件會(huì)被觸發(fā)症汹，而原始頁面并不觸發(fā)storage事件硫朦。可以通過這種機(jī)制背镇，實(shí)現(xiàn)多個(gè)窗口之間的通信咬展。所有瀏覽器之中，只有IE瀏覽器除外瞒斩，它會(huì)在所有頁面觸發(fā)storage事件破婆。（源自阮一峰）
具體什么意思，請(qǐng)看下面的截圖就一目了然：
- localStorage.length表示localStorage對(duì)象的key的數(shù)量
1.5 實(shí)戰(zhàn)
//html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
網(wǎng)站名：<input type="text" id="website">
<br>
網(wǎng)站地址：<input type="text" id="url">
<br>
<button id='confirm'>確認(rèn)</button>
<hr>
網(wǎng)站名：<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)
});
})();
2.Cookie機(jī)制
Cookie原意是小甜餅胸囱，是服務(wù)器保存在瀏覽器的一小段文本信息祷舀，屬于其中一種互聯(lián)網(wǎng)存儲(chǔ)機(jī)制。
2.1 Cookie特點(diǎn)
- 每個(gè)Cookie大小一般不超過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)前頁面的所有Cookie
var allCookies = document.cookie
//document.cookie返回的是分號(hào)分隔的所有cookie柬帕，如要取得每個(gè)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一次只能寫一個(gè)cookie，而且是寫入而不是覆蓋陷寝；
[疑問]為什么讀取cookie是全部锅很，而寫入則是一個(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的簡便方法就是設(shè)置expires = 0或者是過期時(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過期時(shí)間翘簇，格式為形式為expires = someDate.toGMTString()撬码；
domain:指定cookie所在的域名，只有訪問的域名匹配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寫法：
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頭中|僅在客戶端，如需通信坎藐，可通過get或post方法
應(yīng)用場(chǎng)景|用戶登錄身份驗(yàn)證（結(jié)合HttpOnly相對(duì)安全性高）|保存用戶購物車信息以及HTML5游戲的本地存儲(chǔ)
參考資料
