描述一下cookies，sessionStorage和localStorage的區別？

這裏是修真院前端小課堂，每篇分享文從

【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴展思考】【更多討論】【參考文獻】

八個方面深度解析前端知識/技能，本篇分享的是：

【描述一下cookies，sessionStorage和localStorage的區別？】

1.背景介紹

SessionStorage, LocalStorage, Cookie這三者均可以被用來在瀏覽器端存儲數據，並且都是字符串類型的鍵值對。 區別在於前二者屬於WebStorage，建立它們的目的便於客戶端存儲數據。 而Cookie早在網景公司的瀏覽器中就開始支持，最初目的是爲了保持HTTP的狀態。

 

Cookie（也叫Web cookie或者瀏覽器Cookie）是服務器發送到用戶瀏覽器並保存在瀏覽器上的一塊數據， 它會在瀏覽器下一次發起請求時被攜帶併發送到服務器上。比較經典的，能夠它用來肯定兩次請求是否來自於同一個瀏 覽器，從而可以確認和保持用戶的登陸狀態。Cookie的使用使得基於無狀態的HTTP協議上記錄穩定的狀態信息成爲了可能。

localStorage 是 HTML5 標準中新加入的技術，它並非什麼劃時代的新東西。 早在 IE 6 時代，就有一 個叫 userData 的東西用於本地存儲，而當時考慮到瀏覽器兼容性， 更通用的方案是使用 Flash。而現在，localStorage 被大多數瀏覽器所支持，更多用他來存儲數據。

sessionStorage 與 localStorage 的接口相似， 但保存數據的生命週期與 localStorage 不一樣。 作事後 端開發的同窗應該知道 Session 這個詞的意思， 直譯過來是「會話」。 而 sessionStorage 是一個前端的概念， 它只 是能夠將一部分數據在當前會話中保存下來， 刷新頁面數據依舊存在。 但當頁面關閉後，sessionStorage 中的數據就會被清空

2.知識剖析
在同一個頁面中設置 Cookie，其實是按從後往前的順序進行的。若是要先刪除一個 Cookie，再寫入一 個 Cookie，則必須先寫入語句，再寫刪除語句，不然會出現錯誤Cookie是面向路徑的。缺省路徑 (path) 屬性時 ，Web 服務器頁會自動傳遞當前路徑給瀏覽器，指定路徑強制服務器使用設置的路徑。在一個目錄頁面裏設置的 Cookie 在另外一個目錄的頁面裏是看不到的Cookie 必須在 HTML 文件的內容輸出以前設置；不一樣的瀏覽器 對 Cookie 的處理不一致，使用時必定要考慮；客戶端用戶若是設置禁止 Cookie，則 Cookie 不能創建。而且在客戶端， 一個瀏覽器能建立的 Cookie 數量最多爲 300 個，而且每一個不能超過 4KB，每一個 Web 站點能設置的 Cookie 總數不能超過 20 個

cookie的設置以及發送過程分爲如下四步：

客戶端發送一個http請求到服務器端

服務器端發送一個http響應到客戶端，其中包含Set-Cookie頭部

客戶端發送一個http請求到服務器端，其中包含Cookie頭部

服務器端發送一個http響應到客戶端

Storage類的相關成員

成員名 方法參數 描述
length 屬性 獲取存儲數據的條數
key(n) n:索引值 根據索引值，返回鍵名
getItem(key) key:鍵名 根據鍵名，獲取數據值
setItem(key,value) key:鍵名 value:鍵值 根據鍵名和鍵值設置數據項，若是鍵名已經存在，則覆蓋值
removeItem(key) key:鍵名 根據鍵名刪除一個數據項
clear() 無 清空當前的Storage對象
三者之間的區別對比：

特性 Cookie localStorage sessionStorage
特性 通常由服務器生成，可設置失效時間。若是在瀏覽器端生成Cookie，默認是關閉瀏覽器後失效 除非被清除，不然永久保存 僅在當前會話下有效，關閉頁面或瀏覽器後被清除
存放數據大小 4K左右 通常爲5MB
與服務器端通訊 每次都會攜帶在HTTP頭中，若是使用cookie保存過多數據會帶來性能問題 僅在客戶端（即瀏覽器）中保存，不參與和服務器的通訊
易用性 須要程序員本身封裝，源生的Cookie接口不友好 源生接口能夠接受，亦可再次封裝來對Object和Array有更好的支持
3.常見問題
 

COOKIE是如何工做的？

 

4.解決方案
 

COOKIE是如何工做的？

 

Cookie可用於客戶端數據的存儲，在沒有其它存儲辦法時，使用這種方式是可行的，但隨着如今瀏覽器開始支持各類各樣 
的存儲方式而逐漸被廢棄。 因爲服務器指定Cookie之後瀏覽器的每次請求都會攜帶Cookie數據，這會帶來額外的性能負 
擔（尤爲是在移動環境下）。 新的瀏覽器API已經容許開發者直接在本地存儲數據，如可使用Web storage API （本地 
存儲和會話存儲）和IndexedDB（索引數據庫）。 

COOKIE主要用在如下三個方面:

會話狀態管理（如用戶登陸狀態、購物車） 
個性化設置（如用戶自定義設置） 
瀏覽器行爲跟蹤（如跟蹤分析用戶行爲）

5.編碼實戰
6.擴展思考
三者的用途差別？

例如：曾經使用 Cookie 來保存用戶在電商網站的購物車信息，現在有了 localStorage，Cookie就退休了。還有像一些 網頁遊戲會產生一些本地數據，也使用LocalStorage。但若是須要拆分頁面，會跳轉多個子頁面的時候，就須要用到sessionStorage。

COOKIE的缺陷

每一個 HTTP 請求中都包含 Cookies，從而致使傳輸相同的數據減緩咱們的 Web 應用程序。 
每一個 HTTP 請求中都包含 Cookies，從而致使發送未加密的數據到互聯網上，可能會致使數據泄露，雖然進行過加密，可是攻擊者拿到cookie後仍然能夠登陸，由於難以識別是否爲同一個用戶在登錄。 
Cookies 只能存儲有限的 4KB 數據，對於複雜的存儲需求來講是不夠用的。

7.參考文獻
參考資料：https://www.cnblogs.com/zr123...

—— Cookie、session和localStorage、以及sessionStorage之間的區別

參考資料：https://www.cnblogs.com/minig...

—— JS 詳解 Cookie、 LocalStorage 與 SessionStorage

 

8.更多討論
 

如何優化cookie？

關於安全性的考慮？

9.互動提問
sessionStroage有哪些應用場景？ 
答： 在不須要和服務器交互的場所，用來存儲用戶數據之類的，能夠在路由頁跳轉的時候取出更改儲存，減小調用接口的次數，減輕服務器壓力。

用storage怎麼來判斷用戶是否須要再登錄？ 
答：能夠用加密的方法存儲，每次用戶訪問的時候能夠取出調用服務器接口做爲參數發送進行對比，存在帳號密碼就直接跳過登陸頁。

localStorage是否能夠在同源窗口共享？ 答：同一瀏覽器的相同域名和端口的不一樣頁面間能夠共享相同的 localStorage，可是不一樣頁面間沒法共享sessionStorage的信息。