Web Storage 和 Cookie 的區分
Web Storage 和 Cookie 的區別
Cookie 的大小是受限制的，並且每次請求一個新的頁面的時候 Cookie 都會被髮送過去，這樣無形中浪費了頻寬。Web Storage 和 Cookie 都不能跨域使用。Cookie 需要前端開發者自己封裝 setCookie，getCookie。
一、Web Storage
Web Storage 分為本地儲存和會話儲存。
本地儲存(localStorage)：長時間的儲存在電腦本地，不同頁面之間都能互相讀取本地儲存的資料。
會話儲存(sessionStorage)：只限於當前頁面，當前頁面關閉，資料就清除了。
WEB儲存使在不影響網站效能的情況下儲存大量資料成為可能。
注意：Web Storage 儲存的是字串，使用和儲存時別忘記做相應的轉換。
相容性：
IE6-7使用cookie儲存資料。
localStorage 和 sessionStorage方法大致一樣，最常用的是這幾個：
1.getItem(key);獲取指定key本地儲存的值
2.setItem(key,value);將value儲存到key欄位
3.removeItem(key);刪除指定key本地儲存的值
4.clear();清除所有的本地儲存
5.length;讀取本地儲存的鍵值對個數
6.key(i);讀取本地儲存第 i 個 key 的名稱，i 從0開始
7.storage事件：當本地儲存的資料發生變化時會觸發此事件，包含的屬性有：
storageArea: 表示儲存型別（Session或Local）
key:發生改變項的key
oldValue: key的原值
newValue: key的新值
url*: key改變發生的URL
* 注意: url 屬性早期的規範中為uri屬性。有些瀏覽器釋出較早，沒有包含這一變更。為相容性考慮，使用url屬性前，你應該先檢查它是否存在，如果沒
有url屬性，則應該使用uri屬性。
如果呼叫clear()方法，那麼key、oldValue和newValue都會被設定為null。
PS：在firefox和chrome中儲存和讀取都是正常的, 但是對storage事件的觸發似乎有點問題, 自身頁面進行setItem後沒有觸發window的storage事件, 但是
同時訪問A.html和B.html, 在A頁面中進行 setItem能觸發B頁面中window的storage事件, 同樣的在B頁面中進行setItem能觸發A頁面中window的
storage事件. 在IE9中, 頁面自身的設值能觸發當前頁面的storage事件,同樣當前頁面的設值能觸發同一”起源”下其他頁面window的storage事件。
var arrDisplay = [0, 1, 1, 1];
//儲存，IE6~7 cookie 其他瀏覽器HTML5本地儲存
if (window.localStorage) {
localStorage.setItem("menuTitle", arrDisplay);
} else {
Cookie.write("menuTitle", arrDisplay);
}
var strStoreDate = window.localStorage? localStorage.getItem("menuTitle"): Cookie.read("menuTitle");
strStoreDate.split(",").forEach(function(n, i) {
//n是當前的值，i是當前的下標。
});var storage = window.localStorage;
for (var i=0; i < <span style="font-family: Arial;">storage.length</span>; i++){
var key = storage.key(i);
var value = storage.getItem(key);
console.log(key + "=" + value);
} 2017.10.17從W3C看到的最新版本：可以把WEB儲存直接看成一個物件呼叫，每次設定或獲取某個值時不用呼叫以前 getItem() 這種方法了（以前的方法用還是能用的）。
sessionStorage.lastname="Smith";
console.log(sessionStorage.lastname);二、瀏覽器 Cookie
應用場景：
1、Cookies最典型的應用是判定註冊使用者是否已經登入網站。
2、另一個重要應用場合是“購物車”之類處理。使用者可能會在一段時間內在同一家網站的不同頁面中選擇不同的商品，這些資訊都會寫入Cookies，以便在最後付款時提取資訊。
Cookie 的限制：
第一：每個特定的域名 domain 下最多生成20個 cookie
1. IE6或更低版本最多20個cookie
2. IE7和之後的版本最後可以有50個cookie
3. Firefox最多50個cookie
4. Chrome和Safari沒有做硬性限制
第二：cookie 最大大約在4M，為了相容性，一般不能超過4M，否則會被裁掉
缺點：
安全性問題。如果cookie被人攔截了，那人就可以取得所有的session資訊。即使加密也於事無補，因為攔截者並不需要知道cookie的意義，他只要原樣轉發cookie就可以達到目的了。
方法：
1、設定 Cookie
function setCookie(name, value, expiresTime){
var date = new Date();
// expiresTime 以天計算
date.setTime(date.getTime()+expiresTime*24*3600*1000);
document.cookie = name + "=" + value + ((expiresTime == null) ? "" : ";expires="+date.toGMTString());
}2、讀取 Cookie
function getCookie(name)
{
var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
if(arr=document.cookie.match(reg))
return decodeURI(arr[2]);
else
return null;
}3、刪除 Cookie 原理就是設定過期時間為過去的某個時間。
function delCookie(name){
var date = new Date();
date.setTime(date.getTime() - 10000);
document.cookie = name + "=-1;expires=" + date.toGMTString();
}4、獲取所有的 Cookie
document.cookie // name=Jim;age=22;gender=man