在前端開發中，往往會将有些不經常更改的資料緩存到本地，比如使用者資訊。前端本地緩存的方式有多種，比如SessionStorage、localStorage 以及 cookies 等。那麼這個幾個緩存有什麼差別，各自又有什麼特點呢？将是本文分享的重點。
一、cookie
1. cookie是什麼
網絡早期最大的問題之一是如何管理狀态。簡而言之，伺服器無法知道兩個請求是否來自同一個浏覽器。當時最簡單的方法是在請求時，在頁面中插入一些參數，并在下一個請求中傳回參數。這需要使用包含參數的隐藏的表單，或者作為URL參數的一部分傳遞。這兩個解決方案都手動操作，容易出錯。cookie出現來解決這個問題。
2. cookie原理
第一次通路網站，浏覽器會發送一個請求，伺服器響應這個請求，會将cookie放進響應體中。
第二次通路網站，浏覽器發送的請求帶有cookie，伺服器會辨識這個使用者的身份。
2. cookie的屬性
（1）Name：cookie的名字，一個域名下綁定的cookie的name不能相同。如果是相同的name則會被覆寫。
（2）value：每個cookie擁有的屬性，表示cookie的值。
（3）domain：cookie的域名。cookie綁定的域名，如果沒有設定，自動綁定目前執行語句的的域。同一個域名下的二級域名也是不可以交換cookie的。
（4）path：path是預設屬性’/'，比對web路由。
（5）Expires：expires是cookie的有效期。一般浏覽器的cookie是預設存儲的，關閉浏覽器結束會話，cookie就會被删除。
如果想要cookie續存一段時間，可以通過設定expires有效期。
expires現在被Max-Age取代：Max-Age，是以秒為機關的，Max-Age為正數時，cookie會在Max-Age秒之後，被删除；當Max-Age為負數時，表示的是臨時儲存，不會生出cookie檔案，隻會存在浏覽器記憶體中，且隻會在打開的浏覽器視窗或者子視窗有效，一旦浏覽器關閉，cookie就會消失；當Max-Age為0時，删除cookie，因為cookie機制本身沒有設定删除cookie，失效的cookie會被浏覽器自動從記憶體中删除，是以，它實作的就是讓cookie失效。
（6）secure：安全。http無狀态無加密，不安全協定容易被攻擊挾持。比如你在浏覽頁面的時候是不是會有小廣告出來。這個secure屬性為true的時候，這個時候的cookie隻會在https和ssl等安全協定下傳輸。不能對cookie加密，絕對安全保證做不到。
（7）httpOnly：安全的 Cookie 需要經過 HTTPS 協定通過加密的方式發送到伺服器。即使是安全的，也不應該将敏感資訊存儲在cookie 中，因為它們本質上是不安全的，并且此标志不能提供真正的保護。
3. cookie兩種類型—會話cookie和永久性cookie
（1）一種是Session Cookies：用戶端關閉，資料删除，永久丢失。沒有指定的Expires/Max-Age指令，存儲在記憶體。
（2）一種是Persistent Cookies：用戶端關閉，資料不會删除。當Expires或者Max-Age過期，才會删除資料，存儲在磁盤。
4.cookie的缺點
- 存儲大小有限最大4KB
- http請求時會自動發送給伺服器, 增加了請求的資料量
- 原生的操作文法不太友善操作cookie
- 浏覽器可以設定禁用
二、SessionStorage
SessionStorage 顧名思義就是存在與會話階段，當會話結束時，SessionStorage 存儲的資料即會失效。那麼關鍵來了什麼才表示會話結束？其實在浏覽器中一個活動标簽頁即代表一個會話Session，如果目前标簽頁被關掉即代表，目前會話結束，此時目前 SessionStorage 中存儲的資料就會被浏覽器自動銷毀。
1.SessionStorage的用法
sessionStorage.setItem(key,value)：存儲資料，接收2個參數，一個是 key，一個是 value。
sessionStorage.getItem(key)：擷取資料，接收1個參數，參數為 key，可擷取 value。
sessionStorage.removeItem(key)：移除指定資料，接收1個參數，參數為 key，移除相應的 value。
sessionStorage.clear()：移除所有資料，無參數。
//存儲緩存資料
sessionStorage.setItem("name", "jack");
sessionStorage.setItem("age", 18);
//擷取緩存資料
var name = sessionStorage.getItem("name");
var age = sessionStorage.getItem("age");
console.log(name)//"jack"
console.log(age)//18
//移除指定緩存
// sessionStorage.removeItem("name");//移除name緩存
//移除所有緩存
// sessionStorage.clear(); 移除所有緩存
// 擷取引用類型
//存儲緩存資料
sessionStorage.setItem("data", JSON.stringify({ name: "jack", age: 18 }));
// 擷取緩存資料
var data = JSON.parse(sessionStorage.getItem("data"));
console.log(data)//{name:"jack",age:18};
2.SessionStorage失效時間
sessionStorage的生命周期僅在目前會話有效。sessionStorage引入了“浏覽器視窗的概念”。sessionStorage在同源視窗中始終存在資料，隻要浏覽器視窗沒有關閉，重新整理或者重新進入頁面資料依然存在。關閉浏覽器視窗後資料會被删除。再次獨立打開同一個視窗同一個頁面，sessionStorage也是不一樣。
3.SessionStorage存儲的位置
sessionStorage都儲存在用戶端，一般不與伺服器進行通信互動。
4.SessionStorage存儲的大小
sessionStorage存儲資料大小一般是5MB
三、localStorage
localStorage理論上來說是永久有效的，即不主動清空的話就不會消失，即使儲存的資料超出了浏覽器所規定的大小，也不會把舊資料清空而隻會報錯。但需要注意的是，在移動裝置上的浏覽器或各Native App用到的WebView裡，localStorage都是不可靠的，可能會因為各種原因（比如說退出App、網絡切換、記憶體不足等原因）被清空。
1.localStorage的用法
localStorage.setItem(key,value)：存儲資料，接收2個參數，一個是 key，一個是 value。
localStorage.getItem(key)：擷取資料，接收1個參數，參數為 key，可擷取 value。
localStorage.removeItem(key)：移除指定資料，接收1個參數，參數為 key，移除相應的 value。
localStorage.clear()：移除所有資料，無參數。
//存儲緩存資料
localStorage.setItem("name", "jack");
localStorage.setItem("age", 18);
//擷取緩存資料
var name = localStorage.getItem("name");
var age = localStorage.getItem("age");
console.log(name)//"jack"
console.log(age)//18
//移除指定緩存
// localStorage.removeItem("name");//移除name緩存
//移除所有緩存
// localStorage.clear(); 移除所有緩存
//存儲緩存資料
localStorage.setItem("data", JSON.stringify({ name: "jack", age: 18 }));
//擷取緩存資料
var data = JSON.parse(localStorage.getItem("data"));
console.log(data)//{name:"jack",age:18};
2.localStorage的失效時間
localStorage的生命周期是永久的，關閉頁面或者浏覽器之後localStorage中的資料也不會消失。localStorage删除資料要手動删除，否則資料永遠不會消失。
3.localStorage存儲的位置
localStorage都儲存在用戶端，一般不與伺服器進行通信互動。
4.localStorage存儲的大小
localStorage存儲資料大小一般是5MB
四、localStorage與sessionStorage差別
1.相同點
- 純浏覽器端存儲, 存儲空間在 2.5M 到 10M 之間（各浏覽器不同）, 請求時不會自動攜帶
- 隻能儲存文本, 如果是對象或數組, 需要轉換為JSON
2.不同點
- localStorage儲存在本地檔案中, 除非編碼或手動删除, 否則一直存在
- sessonStorage資料儲存在目前會話記憶體中, 關閉浏覽器則清除
五、cookie與其他兩種的差別
- 存儲的容量大小，cookie最大隻有4KB
- 請求時是否自動攜帶
- API的易用性
六、總結
Cookie、SessionStorage、 LocalStorage都是浏覽器的本地存儲。它們的共同點：都是存儲在浏覽器本地的。它們的差別：cookie是由伺服器端寫入的，而SessionStorage、 LocalStorage都是由前端寫入的，cookie的生命周期是由伺服器端在寫入的時候就設定好的，LocalStorage是寫入就一直存在，除非手動清除，SessionStorage是頁面關閉的時候就會自動清除。cookie的存儲空間比較小大概4KB，SessionStorage、 LocalStorage存儲空間比較大，大概5M。Cookie、SessionStorage、 LocalStorage資料共享都遵循同源原則，SessionStorage還限制必須是同一個頁面。在前端給後端發送請求的時候會自動攜帶Cookie中的資料，但是SessionStorage、 LocalStorage不會。
由于它們的以上差別，是以它們的應用場景也不同，Cookie一般用于存儲登入驗證資訊SessionID或者token，LocalStorage常用于存儲不易變動的資料，減輕伺服器的壓力，SessionStorage可以用來檢測使用者是否是重新整理進入頁面，如音樂播放器恢複播放進度條的功能。