> 基本概念
cookie
cookie 是存儲於訪問者的計算機中的變量。每當同一台計算機通過瀏覽器請求某個頁面時,就會發送這個 cookie。你可以使用 JavaScript 來創建和取回 cookie 的值。
當訪問者首次訪問頁面時,他或她也許會填寫他/她們的名字。名字會存儲於 cookie 中。當訪問者再次訪問網站時,他們會收到類似 "Welcome Jacob!" 的歡迎詞。而名字則是從 cookie 中取回的。這通常就是通過在 cookie 中存入一段辨別用戶身份的數據來實現的。
在HTML5之前,這些都是由 cookie 完成的。但是 cookie 不適合大量數據的存儲,因為它們由每個對服務器的請求來傳遞,這使得 cookie 速度很慢而且效率也不高。
在HTML5中提供了兩種在客戶端存儲數據的新方法:
sessionStorage
為每一個給定的源(given origin)維持一個獨立的存儲區域,該存儲區域在頁面會話期間可用(即只要瀏覽器處於打開狀態,包括頁面重新加載和恢復)。
localStorage
同樣的功能,但是在瀏覽器關閉,然后重新打開后,除非數據被清除,否則仍然存在。
> 三者的區別
特性 | cookie | sessionStorage | localStorage |
---|---|---|---|
數據生命期 | 生成時就會被指定一個maxAge值,這就是cookie的生存周期,在這個周期內cookie有效,默認關閉瀏覽器失效 | 頁面會話期間可用 | 除非數據被清除,否則一直存在 |
存放數據大小 | 4K左右(因為每次http請求都會攜帶cookie) | 一般5M或更大詳細看這(需科學上網) | |
與服務器通信 | 由對服務器的請求來傳遞,每次都會攜帶在HTTP頭中,如果使用cookie保存過多數據會帶來性能問題 | 數據不是由每個服務器請求傳遞的,而是只有在請求時使用數據,不參與和服務器的通信 | |
易用性 | cookie需要自己封裝setCookie,getCookie | 可以用源生接口,也可再次封裝來對Object和Array有更好的支持 | |
共同點 | 都是保存在瀏覽器端,和服務器端的session機制不同(這里有一篇很好的介紹cookie和session的文章) |
> 安全性問題
無論是cookie還是HTML5的本地存儲,都是相對不安全的,很容易受到各種各樣的攻擊,特別是HTML5的存儲空間大,給了攻擊者更大的發揮平台,所以都不能用來存儲敏感信息。登錄信息等重要信息還是存放到服務器里比較好。