摘要：內(nèi)存由瀏覽器維護(hù)，瀏覽器關(guān)閉后消失硬盤存在硬盤里，有過期時(shí)間，除非手動(dòng)清理或到過期時(shí)間，否則不會(huì)消失。是一個(gè)瀏覽器狀態(tài)管理文件，由于協(xié)議是不保存狀態(tài)的，需要在請(qǐng)求中攜帶發(fā)送到服務(wù)器，服務(wù)器根據(jù)判斷用戶。

面試題目中經(jīng)常被問到Cookie和LocalStorage的區(qū)別，可見其在項(xiàng)目開發(fā)中的重要性，這篇文章旨在詳細(xì)闡述這部分內(nèi)容。

概念

1.Cookie
Cookie分為內(nèi)存Cookie和硬盤Cookie。內(nèi)存 Cookie由瀏覽器維護(hù)，瀏覽器關(guān)閉后消失；硬盤Cookie存在硬盤里，有過期時(shí)間，除非手動(dòng)清理或到過期時(shí)間，否則不會(huì)消失。
Cookie是一個(gè)瀏覽器狀態(tài)管理文件，由于http協(xié)議是不保存狀態(tài)的，需要在http請(qǐng)求中攜帶Cookie發(fā)送到服務(wù)器，服務(wù)器根據(jù)cookie判斷用戶。

Cookie原理

Cookie只能綁定單一域名，不可以跨域使用。
Cookie屬性：
name：Cookie名稱，設(shè)置相同名稱的值會(huì)被覆蓋掉;
value：Cookie值，考慮服務(wù)器兼容性，必須URL編碼;
domain：Cookie綁定域名，沒設(shè)置的話自動(dòng)綁定執(zhí)行語句當(dāng)前域，統(tǒng)一域名下的二級(jí)域名不可交換使用Cookie;
path：匹配路由;
expires/Max-Age：有效期；expires是具體日期，Max-age是以秒為單位，設(shè)置為0時(shí)，關(guān)閉瀏覽器cookie清除;
secure：設(shè)置該屬性后，僅通過安全通道（https）傳輸時(shí)，http請(qǐng)求才會(huì)包含cookie，但secure僅保護(hù)cookie的機(jī)密性，不能保護(hù)完整性，也不能對(duì)客戶端Cookie進(jìn)行加密;
httpOnly： 設(shè)為true時(shí)，不能腳本獲取Cookie，能有效避免跨域本?(XSS)?攻擊

Cookie操作：
獲取Cookie：document.cookie
修改Cookie：document.cookie = “cookie_name=cookie_value”

Cookie安全：
XSS攻擊：XSS(Cross Site Scripting)是跨站點(diǎn)腳本攻擊的縮寫. 其就是利用站點(diǎn)開放的文本編輯并發(fā)布的功能, 從而造成攻擊.其實(shí)說的簡單一點(diǎn), 就是輸入javascript腳本, 竊取并投遞cookie信息到自己的站點(diǎn).
比如攻擊者以一個(gè)普通用戶登錄進(jìn)來，然后在輸入框中提交以下數(shù)據(jù)：

text 

攻擊者提交a標(biāo)簽后，該數(shù)據(jù)保存在服務(wù)器端，當(dāng)管理員登陸后點(diǎn)擊到這個(gè)a標(biāo)簽后會(huì)獲取當(dāng)前cookie到上面a標(biāo)簽設(shè)定的網(wǎng)址，叫做XSS攻擊，也叫Cookie劫持。

如何防御：
1.添加HttpOnly 屬性；
2.在cookie中添加校驗(yàn)信息，比如IP，UA等判斷是否真正用戶；
3.cookie中的session id定時(shí)更換。

cookie接口封裝：

var cookieUtil = {
    // 設(shè)置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新增的客戶端存儲(chǔ)API，都遵循瀏覽器的同源策略。
localStorage:沒有時(shí)間限制的數(shù)據(jù)存儲(chǔ)
sessionStorage:針對(duì)一個(gè)session的數(shù)據(jù)存儲(chǔ)
操作：
setItem(key, value) 以鍵值對(duì)的形式存儲(chǔ)，
localStorage.setItem(‘key’, value)

getItem(key) 通過key獲取value值
var value = sessionStorage.getItem(“key”)

removeItem(key)通過key刪除對(duì)應(yīng)value
localStorage.removeItem(“key”)

clear()  清空存儲(chǔ)內(nèi)容
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) // 返回已存儲(chǔ)簡直對(duì)的個(gè)數(shù)

三者的異同

數(shù)據(jù)生命周期
Cookie:一般由服務(wù)器生成，可設(shè)置失效時(shí)間。如果在瀏覽器端生cookie，默認(rèn)關(guān)閉瀏覽器后失效
localStorage:除非被清除，否則永久保存
sessionStorage:僅在當(dāng)前會(huì)話下有效，關(guān)閉頁面或?yàn)g覽器被清除
存放數(shù)據(jù)大小
Cookie:4K左右
localStorage/sessionStorage:5MB左右
與服務(wù)器端通信
Cookie:每次都會(huì)攜帶在HTTP頭中，如果cookie保存過多，會(huì)帶來性能問題
localStorage/sessionStorage:僅在客戶端內(nèi)存中保存，不參與和服務(wù)器端通信
易用性
Cookie:需要自己封裝，源生Cookie接口不友好
localStorage/sessionStorage:源生接口可接受，使用方便
參考資料
維基百科-Cookie
把cookie聊清楚
Secure Cookie
Http cookies
Window.localStorage
詳說Cookie、localStorage、sessionStorage