摘要：內存由瀏覽器維護，瀏覽器關閉后消失硬盤存在硬盤里，有過期時間，除非手動清理或到過期時間，否則不會消失。是一個瀏覽器狀態管理文件，由于協議是不保存狀態的，需要在請求中攜帶發送到服務器，服務器根據判斷用戶。

面試題目中經常被問到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信息到自己的站點.
比如攻擊者以一個普通用戶登錄進來，然后在輸入框中提交以下數據：

text 

攻擊者提交a標簽后，該數據保存在服務器端，當管理員登陸后點擊到這個a標簽后會獲取當前cookie到上面a標簽設定的網址，叫做XSS攻擊，也叫Cookie劫持。

如何防御：
1.添加HttpOnly 屬性；
2.在cookie中添加校驗信息，比如IP，UA等判斷是否真正用戶；
3.cookie中的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
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