一、方式

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

cookie

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

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

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

關於cookie常用的屬性如下：

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

Max-Age=604800

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

通過上述，我們可以看到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過期後會被瀏覽器刪除

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

下面再看看關於localStorage的使用

設置

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

獲取

localStorage.getItem('username')

獲取鍵名

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

刪除

localStorage.removeItem('username')

一次性清除所有存儲

localStorage.clear()

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

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

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

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

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

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

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

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

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