JS中 Cookie、 LocalStorage 與 SessionStorage
阿新 • • 發佈：2019-01-06
一、基本概念
1. Cookie
Cookie：主要用途有儲存登入資訊。cookie 確實非常小，它的大小限制為4KB左右。
用途：比如你登入某個網站市場可以看到“記住密碼”，這通常就是通過在 Cookie 中存入一段辨別使用者身份的資料來實現的。
2. LocalStorage
LocalStorage：HTML5 標準中新加入的技術，是瀏覽器端的本地快取。
3. SessionStorage
SessionStorage：與 localStorage 的介面類似，但儲存資料的生命週期與 localStorage 不同。它只是可以將一部分資料在當前會話中儲存下來，重新整理頁面資料依舊存在。但當頁面關閉後，sessionStorage 中的資料就會被清空。
二、區別
| 特性 | Cookie | LocalStorage | SessionStorage |
|---|---|---|---|
| 資料的生命期 | 一般由伺服器生成，可設定失效時間。如果在瀏覽器端生成Cookie，預設是關閉瀏覽器後失效 | 除非被清除，否則永久儲存 | 僅在當前會話下有效，關閉頁面或瀏覽器後被清除 |
| 存放資料大小 | 4K左右 | 一般為5MB | |
| 與伺服器端通訊 | 每次都會攜帶在HTTP頭中，如果使用cookie儲存過多資料會帶來效能問題 | 僅在客戶端（即瀏覽器）中儲存，不參與和伺服器的通訊 | |
| 易用性 | 需要程式設計師自己封裝，源生的Cookie介面不友好 | 源生介面可以接受，亦可再次封裝來對Object和Array有更好的支援 | |
三、LocalStorage 和 SessionStorage 的操作
LocalStorage 和 SessionStorage 具有相同的操作方法，例如setItem、 getItem 和 removeItem 等
1. 新增value
描述：使用 key/value 的形式將資料儲存進本地儲存中
格式：
sessionStorage.setItem("key", "value");
localStorage.setItem("site", "js8.in");
2.獲取value
描述：獲取指定 key
格式：
var value = sessionStorage.getItem("key");
var site = localStorage.getItem("site");
3.刪除value
描述：刪除指定 key 本地儲存的值
格式：
sessionStorage.removeItem("key");
localStorage.removeItem("site");
4.清除value
描述：清除所有的 key/value
格式：
sessionStorage.clear();
localStorage.clear();