一、基本概念

Cookie

cookie比較小，大小限制在4kb左右，是網景公司的前僱員 LouMontulli 在1993年3月的發明。它的主要用途有儲存登入資訊，比如你登入某個網站市場可以看到“記住密碼”，這通常就是通過在 Cookie 中存入一段辨別使用者身份的資料來實現的。
localStorage

localStorage 是 HTML5 標準中新加入的技術，它並不是什麼劃時代新東西。早在 IE 6 時代，就有一個叫 userData 的東西用於本地儲存，而當時考慮到瀏覽器相容性，更通用的方案是使用 Flash。而如，localStorage 被大多數瀏覽器所支援，如果你的網站需要支援 IE6+，那以 userData 作為你的 polyfill 的方案是種不錯的選擇。

sessionStorage

sessionStorage 與 localStorage 的介面類似，但儲存資料的生命週期與 localStorage 不同。做過後端開發的同學應該知道 Session 這個詞的意思，直譯過來是“會話”。而 sessionStorage 是一個前端的概念，它只是可以將一部分資料在當前會話中儲存下來，重新整理頁面資料依舊存在。但當頁面關閉後，sessionStorage 中的資料就會被清空。

二、異同

sessionStarage ,localStorage,cookie 都是在瀏覽器端儲存的資料，其中sessionStorage的概念很特別，引入了一個瀏覽器視窗的概念。sessionStorage實在同源的 同窗口（或tab） 中，始終存在的資料。即只要這個瀏覽器視窗沒有關閉，即使重新整理頁面或進入同源另一頁面，資料仍然存在。關閉視窗後，sessionStorage即被銷燬。同時“獨立”開啟的不同視窗，即使是同一頁面，sessionStorage物件也是不同的。
區別：
（1）cookie資料始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和伺服器間來回傳遞。而sessionStorage和localStorage不會自動把資料發給伺服器，僅在本地儲存。cookie資料還有路徑（path）的概念，可以限制cookie只屬於某個路徑下。
（2）儲存大小限制也不同，cookie資料不能超過4k，同時因為每次http請求都會攜帶cookie，所以cookie只適合儲存很小的資料，如會話標識。sessionStorage和localStorage 雖然也有儲存大小的限制，但比cookie大得多，可以達到5M或更大。
（3）資料有效期不同，sessionStorage：僅在當前瀏覽器視窗關閉前有效，自然也就不可能持久保持；localStorage：始終有效，視窗或瀏覽器關閉也一直儲存，因此用作持久資料；cookie只在設定的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉。
（4）作用域不同，sessionStorage不在不同的瀏覽器視窗中共享，即使是同一個頁面；localStorage 在所有同源視窗中都是共享的；cookie也是在所有同源視窗中都是共享的。
（5）Web Storage 支援事件通知機制，可以將資料更新的通知傳送給監聽者。Web Storage 的 api 介面使用更方便。

sessionStorage與頁面 js 資料物件的區別
頁面中一般的 js 物件或資料的生存期是僅在當前頁面有效，因此重新整理頁面或轉到另一頁面這樣的重新載入頁面的情況，資料就不存在了。
而sessionStorage 只要同源的同窗口（或tab）中，重新整理頁面或進入同源的不同頁面，資料始終存在。也就是說只要這個瀏覽器視窗沒有關閉，載入新頁面或重新載入，資料仍然存在。

三、瀏覽器本地儲存與伺服器端儲存之間的區別

瀏覽器端可以儲存一些資料，需要的時候直接從本地獲取，sessionStorage、localStorage和cookie都由瀏覽器儲存在本地的資料。

伺服器端也可以儲存所有使用者的所有資料，但需要的時候瀏覽器要向伺服器請求資料。
（1）伺服器端可以儲存使用者的持久資料，如資料庫和雲端儲存將使用者的大量資料儲存在伺服器端。
（2）伺服器端也可以儲存使用者的臨時會話資料。伺服器端的session機制，如jsp的 session 物件，資料儲存在伺服器上。實現上，伺服器和瀏覽器之間僅需傳遞session id即可，伺服器根據session id找到對應使用者的session物件。會話資料僅在一段時間內有效，這個時間就是server端設定的session有效期。
（3）伺服器端儲存所有的使用者的資料，所以伺服器端的開銷較大，而瀏覽器端儲存則把不同使用者需要的資料分佈儲存在使用者各自的瀏覽器中。
瀏覽器端一般只用來儲存小資料，而伺服器可以儲存大資料或小資料。
伺服器儲存資料安全一些，瀏覽器只適合儲存一般資料。

四、Web Storage 帶來的好處

（1）減少網路流量：一旦資料儲存在本地後，就可以避免再向伺服器請求資料，因此減少不必要的資料請求，減少資料在瀏覽器和伺服器間不必要地來回傳遞。
（2）快速顯示資料：效能好，從本地讀資料比通過網路從伺服器獲得資料快得多，本地資料可以即時獲得。再加上網頁本身也可以有快取，因此整個頁面和資料都在本地的話，可以立即顯示。
（3）臨時儲存：很多時候資料只需要在使用者瀏覽一組頁面期間使用，關閉視窗後資料就可以丟棄了，這種情況使用sessionStorage非常方便。

五、應用場景

因為考慮到每個 HTTP 請求都會帶著 Cookie 的資訊，所以 Cookie 當然是能精簡就精簡啦，比較常用的一個應用場景就是判斷使用者是否登入。
針對登入過的使用者，伺服器端會在他登入時往 Cookie 中插入一段加密過的唯一辨識單一使用者的辨識碼，下次只要讀取這個值就可以判斷當前使用者是否登入啦。
曾經還使用 Cookie 來儲存使用者在電商網站的購物車資訊，如今有了 localStorage，就可以利用localStorage代替cookie了。
而另一方面 localStorage 接替了 Cookie 管理購物車的工作，同時也能勝任其他一些工作。比如HTML5遊戲通常會產生一些本地資料，localStorage 也是非常適用的。如果遇到一些內容特別多的表單，為了優化使用者體驗，我們可能要把表單頁面拆分成多個子頁面，然後按步驟引導使用者填寫。這時候 sessionStorage 的作用就發揮出來了。

六、安全性的考慮

需要注意的是，不是什麼資料都適合放在 Cookie、localStorage 和 sessionStorage 中的。使用它們的時候，
需要時刻注意是否有程式碼存在 XSS 注入的風險。因為只要開啟控制檯，你就隨意修改它們的值，也就是說如果你的網站中有 XSS 的風險，
它們就能對你的 localStorage 肆意妄為。所以千萬不要用它們儲存你係統中的敏感資料。但是cookie可以採取一些策略來預防XSS攻擊。
（http://stackoverflow.com/questions/19867599/what-is-the-difference-between-localstorage-sessionstorage-session-and-cookies）
上面的連結裡有介紹cookie的。

七、判斷 html5 web storage的瀏覽器的支援情況

瀏覽器的支援除了IE７及以下不支援外，其他標準瀏覽器都完全支援(ie及FF需在web伺服器裡執行)，值得一提的是IE總是辦好事，例如IE7、IE6中的UserData其實就是javascript本地儲存的解決方案。
通過簡單的程式碼封裝可以統一到所有的瀏覽器都支援web storage。

if(window.localStorage)
{
    alert(“瀏覽器支援localStorage”)
} else {
    alert("不支援");
}

if(typeof window.localStorage === 'undefined') 如果支援的話會返回object。

八、localStorage 和sessionStorage操作

它們具有相同的操作方法，例如setItem、getItem和removeItem等。
例如：

sessionStarage.setItem('key','value');

getItem獲取value
var value = sessionStorage.getItem("key");  var site = localStorage.getItem("site");

removeItem刪除key
sessionStorage.removeItem("key");   localStorage.removeItem("site");

clear 清除所有的key/value
sessionStorage.clear();     localStorage.clear();

例如：sessionStorage和localStorage提供的key()和length可以方便的實現儲存的資料遍歷

var storage = window.localStorage;
for (var i=0, len = storage.length; i  <  len; i++){
    var key = storage.key(i);
    var value = storage.getItem(key);
    console.log(key + "=" + value); }
}

storage事件
當鍵值改變或者clear的時候，就可以觸發storage事件。
if(window.addEventListener){ 
    window.addEventListener("storage",handle_storage,false);
}else if(window.attachEvent){
    window.attachEvent("onstorage",handle_storage); 
}
function handle_storage(e){
    if(!e){e=window.event;}
}

九、實際應用舉例

利用本地儲存的計數器

var storage = window.localStorage;
if (!storage.getItem("pageLoadCount")) storage.setItem("pageLoadCount",0);
storage.pageLoadCount = parseInt(storage.getItem("pageLoadCount")) + 1;//必須格式轉換
document.getElementByIdx_x("count").innerHTML = storage.pageLoadCount;
showStorage();

需要注意的是，HTML5本地儲存只能存字串，任何格式儲存的時候都會被自動轉為字串，所以讀取的時候，需要自己進行型別的轉換。這也就是上一段程式碼中parseInt必須要使用的原因。