一、方式

javaScript本地緩存的方法我們主要講述以下四種：

• cookie
• sessionStorage
• localStorage
• indexedDB

cookie

Cookie，類型為「小型文本文件」，指某些網站為了辨別用戶身份而儲存在用戶本地終端上的數據。是為了解決 HTTP無狀態導致的問題

作為一段一般不超過 4KB 的小型文本數據，它由一個名稱（Name）、一個值（Value）和其它幾個用于控制 cookie有效期、安全性、使用范圍的可選屬性組成

但是cookie在每次請求中都會被發送，如果不使用 HTTPS并對其加密，其保存的信息很容易被竊取，導致安全風險。舉個例子，在一些使用 cookie保持登錄態的網站上，如果 cookie被竊取，他人很容易利用你的 cookie來假扮成你登錄網站

關于cookie常用的屬性如下：

• Expires 用于設置 Cookie 的過期時間

Expires=Wed, 21 Oct 2015 07:28:00 GMT  

• Max-Age 用于設置在 Cookie 失效之前需要經過的秒數（優先級比Expires高）

Max-Age=604800  

• Domain指定了 Cookie 可以送達的主機名
• Path指定了一個 URL路徑，這個路徑必須出現在要請求的資源的路徑中才可以發送 Cookie 首部

Path=/docs   # /docs/Web/ 下的資源會帶 Cookie 首部  

• 標記為 Secure的 Cookie只應通過被HTTPS協議加密過的請求發送給服務端

通過上述，我們可以看到cookie又開始的作用并不是為了緩存而設計出來，只是借用了cookie的特性實現緩存

關于cookie的使用如下：

document.cookie = '名字=值';  

關于cookie的修改，首先要確定domain和path屬性都是相同的才可以，其中有一個不同得時候都會創建出一個新的cookie

Set-Cookie:name=aa; domain=aa.net; path=/  # 服務端設置  
document.cookie =name=bb; domain=aa.net; path=/  # 客戶端設置  

最后cookie的刪除，最常用的方法就是給cookie設置一個過期的事件，這樣cookie過期后會被瀏覽器刪除

localStorage

HTML5新方法，IE8及以上瀏覽器都兼容

特點

• 生命周期：持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的
• 存儲的信息在同一域中是共享的
• 當本頁操作（新增、修改、刪除）了localStorage的時候，本頁面不會觸發storage事件,但是別的頁面會觸發storage事件。
• 大?。?M（跟瀏覽器廠商有關系）
• localStorage本質上是對字符串的讀取，如果存儲內容多的話會消耗內存空間，會導致頁面變卡
• 受同源策略的限制

下面再看看關于localStorage的使用

設置

localStorage.setItem('username','cfangxu');  

獲取

localStorage.getItem('username')  

獲取鍵名

localStorage.key(0) //獲取第一個鍵名  

刪除

localStorage.removeItem('username')  

一次性清除所有存儲

localStorage.clear()  

localStorage 也不是完美的，它有兩個缺點：

• 無法像Cookie一樣設置過期時間
• 只能存入字符串，無法直接存入對象

localStorage.setItem('key', {name: 'value'});  
console.log(localStorage.getItem('key')); // '[object, Object]'  

sessionStorage

sessionStorage和 localStorage使用方法基本一致，唯一不同的是生命周期，一旦頁面（會話）關閉，sessionStorage 將會刪除數據

擴展的前端存儲方式

indexedDB是一種低級API，用于客戶端存儲大量結構化數據(包括, 文件/ blobs)。該API使用索引來實現對該數據的高性能搜索

雖然 Web Storage對于存儲較少量的數據很有用，但對于存儲更大量的結構化數據來說，這種方法不太有用。IndexedDB提供了一個解決方案

優點：

• 儲存量理論上沒有上限
• 所有操作都是異步的，相比 LocalStorage 同步操作性能更高，尤其是數據量較大時
• 原生支持儲存JS的對象
• 是個正經的數據庫，意味著數據庫能干的事它都能干

缺點：

• 操作非常繁瑣
• 本身有一定門檻

關于indexedDB的使用基本使用步驟如下：

• 打開數據庫并且開始一個事務
• 創建一個 object store
• 構建一個請求來執行一些數據庫操作，像增加或提取數據等。
• 通過監聽正確類型的 DOM 事件已等待操作完成。
• 在操作結果上進行一些操作（可以在 request對象中找到）

關于使用indexdb的使用會比較繁瑣，大家可以通過使用Godb.js庫進行緩存，最大化地降低操作難度

二、區別

關于cookie、sessionStorage、localStorage三者的區別主要如下：

• 存儲大?。篶ookie數據大小不能超過4k，sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多，可以達到5M或更大
• 有效時間：localStorage存儲持久數據，瀏覽器關閉后數據不丟失除非主動刪除數據；sessionStorage數據在當前瀏覽器窗口關閉后自動刪除；cookie設置的cookie過期時間之前一直有效，即使窗口或瀏覽器關閉
• 數據與服務器之間的交互方式，cookie的數據會自動地傳遞到服務器，服務器端也可以寫cookie到客戶端；sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存

三、應用場景

在了解了上述的前端的緩存方式后，我們可以看看針對不對場景的使用選擇：

• 標記用戶與跟蹤用戶行為的情況，推薦使用cookie
• 適合長期保存在本地的數據（令牌），推薦使用localStorage
• 敏感賬號一次性登錄，推薦使用sessionStorage
• 存儲大量數據的情況、在線文檔（附文本編輯器）保存編輯歷史的情況，推薦使用indexedDB