cookies，sessionStorage和localStorage的區別？
這裡是修真院前端小課堂，每篇分享文從
【背景介紹】【知識剖析】【常見問題】【解決方案】【編碼實戰】【擴充套件思考】【更多討論】【參考文獻】
八個方面深度解析前端知識/技能，本篇分享的是：
【cookies，sessionStorage和localStorage的區別？】
【修真院web小課堂】
大家好，我是IT修真院上海分院第9期的學員王剛，一枚正直純潔善良的web程式設計師，今天給大家分享一下，修真院官網web任務6，深度思考中的知識點——cookies，sessionStorage和localStorage的區別？
（1）背景介紹：
隨著網際網路的快速發展，基於網頁的應用越來越普遍，同時也變的越來越複雜，為了滿足各種各樣的需求，會經常性在本地儲存大量的資料，傳統方式我們以document.cookie來進行儲存的，但是由於其儲存大小隻有4k左右，並且解析也相當的複雜，每一次傳送請求都會攜帶上cookie，會造成頻寬的浪費，給開發帶來諸多不便，HTML5規範則提出解決方案。
web儲存的含義是將資料儲存到使用者的電腦上，這樣可以緩解伺服器的壓力，並且提高體驗
####特性
1、設定、讀取方便
2、容量較大，sessionStorage約5M、localStorage約20M
3、只能儲存字串，可以將物件JSON.stringify() 編碼後儲存
（2）知識剖析：
什麼是COOKIE？
Cookie 是小餅乾的意思。cookie 確實非常小，它的大小限制為4KB左右， 是由W3C組織提出，最早由Netscape社群發展的一種機制。目前Cookie已經成為標準， 所有的主流瀏覽器如IE、Netscape、Firefox、Opera等都支援Cookie。 它的主要用途有儲存登入資訊， 比如你登入某個網站市場可以看到“記住密碼”， 這通常就是通過在 Cookie 中存入一段辨別使用者身份的資料來實現的。
Cookie的作用是與伺服器進行互動，作為HTTP規範的一部分而存在
要表示唯一的一個cookie值需要：name、domain、path
一個cookie就是一個小型的文字檔案
雖然cookie儲存在瀏覽器端，但是一般是在伺服器端設定的。
可以在HTTP返回體裡，通過設定Set-Cookie來告訴瀏覽器端所要儲存的cookie。
用來儲存客戶瀏覽器請求伺服器頁面的請求資訊
一個cookie的設定以及傳送過程分為以下四步：
①客戶端傳送一個http請求到伺服器端
②伺服器端傳送一個http響應到客戶端，其中包含Set-Cookie頭部
③客戶端傳送一個http請求到伺服器端，其中包含Cookie頭部
④伺服器端傳送一個http響應到客戶端
COOKIE缺點
Cookie數量和長度的限制。IE6或更低版本每個domian下最多20個cookie，IE7和之後的版本最多可以有 50個cookie，Firefox最多50個cookie，chrome和Safari沒有做硬性限制，每個cookie長度不能超過4KB，否則會被截掉。
IE和Opera 會清理近期最少使用的cookie，Firefox會隨機清理cookie。這就導致不能永久儲存資訊。
安全性問題。如果cookie被人攔截了，那人就可以取得所有的session資訊。即使加密也與事無補，因為攔截者並不需要知道cookie的意義，他只要原樣轉發cookie就可以達到目的了。
並且每次你請求一個新的頁面的時候，cookie只要滿足作用域和作用路徑，Cookie都會被髮送過去，這樣無形中浪費了頻寬。
什麼是LOCALSTORAGE？
localStorage 是 HTML5 標準中新加入的技術，它並不是什麼劃時代的新東西。 早在 IE 6 時代，就有一個叫 userData 的東西用於本地儲存，而當時考慮到瀏覽器相容性， 更通用的方案是使用 Flash。而如今，localStorage 被大多數瀏覽器所支援，更多用他來儲存資料。
什麼是SESSIONSTORAGE？
sessionStorage 與 localStorage 的介面類似， 但儲存資料的生命週期與localStorage 不同。 Session 這個詞 直譯過來是“會話”。 而sessionStorage直譯則是會話儲存， 它只是可以將一部分資料在當前會話中儲存下來， 重新整理頁面資料依舊存在。 但當頁面關閉後，sessionStorage中的資料就會被清空。
什麼是LOCALSTORAGE？
localStorage 是 HTML5 標準中新加入的技術，它並不是什麼劃時代的新東西。 早在 IE 6 時代，就有一個叫 userData 的東西用於本地儲存，而當時考慮到瀏覽器相容性， 更通用的方案是使用 Flash。而如今，localStorage 被大多數瀏覽器所支援，更多用他來儲存資料。
什麼是SESSIONSTORAGE？
sessionStorage 與 localStorage 的介面類似， 但儲存資料的生命週期與localStorage 不同。 Session 這個詞 直譯過來是“會話”。 而sessionStorage直譯則是會話儲存， 它只是可以將一部分資料在當前會話中儲存下來， 重新整理頁面資料依舊存在。 但當頁面關閉後，sessionStorage中的資料就會被清空。
STORAGE類的相關成員如下：
| 成員名 |
方法引數 |
描述 |
| length |
屬性 |
獲取儲存資料的條數 |
| key(n) |
n:索引值 |
根據索引值，返回鍵名 |
| getItem(key) |
key:鍵名 |
根據鍵名，獲取資料值 |
| setItem(key,value) |
key:鍵名 value:鍵值 |
根據鍵名和鍵值設定資料項，如果鍵名已經存在，則覆蓋值 |
| removeItem(key) |
key:鍵名 |
根據鍵名刪除一個數據項 |
| clear() |
無 |
清空當前的Storage物件 |
（3）常見問題：
cookies，sessionStorage和localStorage的區別？
（4）解決方案：
| 特性 |
Cookie |
localStorage |
sessionStorage |
| 生命週期 |
一般由伺服器生成，可設定失效時間。如果在瀏覽器端生成Cookie，預設是關閉瀏覽器後失效 |
除非被清除，否則永久儲存 |
僅在當前會話下有效，關閉頁面或瀏覽器後被清除 |
| 存放資料大小 |
4K左右 |
一般為5MB |
|
| 與伺服器端通訊 |
每次都會攜帶在HTTP頭中，如果使用cookie儲存過多資料會帶來效能問題 |
僅在客戶端（即瀏覽器）中儲存，不參與和伺服器的通訊 |
|
| 易用性 |
需要程式設計師自己封裝，源生的Cookie介面不友好 |
源生介面可以接受，亦可再次封裝來對Object和Array有更好的支援 |
|
（5）編碼實戰：
（6）拓展思考：
有了WebStorage，cookie還有必要麼？
（7）參考文獻：
1.JavaScript高階程式設計
2.head first JavaScript
（8）更多討論：
問題一 ：什麼是Cookie的路徑？
現在有WEB應用A，向客戶端傳送了10個Cookie，這就說明客戶端無論訪問應用A的哪個Servlet都會把這10個Cookie包含在請求中！但是也許只有AServlet需要讀取請求中的Cookie，而其他Servlet根本就不會獲取請求中的Cookie。這說明客戶端瀏覽器有時傳送這些Cookie是多餘的！
問題二 : Cookie中儲存中文？
Cookie的name和value都不能使用中文，如果希望在Cookie中使用中文，那麼需要先對中文進行URL編碼，然後把編碼後的字串放到Cookie中。
問題三 : session和cookie的應用場景有哪些？
session ：登入驗證資訊
cookie ：判斷使用者是否登入過網站，用來記錄購物車或者記錄使用者使用偏好來制定推送
更多內容，可以加入IT交流群565734203與大家一起討論交流
這裡是技能樹·IT修真院：https://www.jnshu.com，初學者轉行到網際網路的聚集地