描述一下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/p/8086525.html
—— Cookie、session和localStorage、以及sessionStorage之間的區別
參考資料：https://www.cnblogs.com/minigrasshopper/p/8064367.html
—— JS 詳解 Cookie、 LocalStorage 與 SessionStorage
8.更多討論
如何優化cookie？
關於安全性的考慮？
9.互動提問
sessionStroage有哪些應用場景？
答： 在不需要和伺服器互動的場所，用來儲存使用者資料之類的，可以在路由頁跳轉的時候取出更改儲存，減少呼叫介面的次數，減輕伺服器壓力。
用storage怎麼來判斷使用者是否需要再登陸？
答：可以用加密的方法儲存，每次使用者訪問的時候可以取出呼叫伺服器介面作為引數傳送進行對比，存在賬號密碼就直接跳過登入頁。
localStorage是否可以在同源視窗共享？
答：同一瀏覽器的相同域名和埠的不同頁面間可以共享相同的 localStorage，但是不同頁面間無法共享sessionStorage的資訊。
更多內容，可以加入IT交流群565734203與大家一起討論交流
這裡是技能樹·IT修真院：http://www.jsnhu.com，初學者轉行到網際網路的聚集地