帶你瞭解web的本地儲存

三種本地存儲方式

一、cookie

1、前言

網絡早期最大的問題之一是如何管理狀態。簡而言之，服務器無法知道兩個請求是否來自同一個瀏覽器。當時最簡單的方法是在請求時，在頁面中插入一些參數，並在下一個請求中傳回參數。這需要使用包含參數的隱藏的表單，或者作爲URL參數的一部分傳遞。這兩個解決方案都手動操作，容易出錯。cookie出現來解決這個問題。

2、作用

cookie是純文本，沒有可執行代碼。存儲數據，當用戶訪問了某個網站（網頁）的時候，我們就可以通過cookie來向訪問者電腦上存儲數據，或者某些網站爲了辨別用戶身份、進行session跟蹤而儲存在用戶本地終端上的數據（通常經過加密）

3、如何工作

當網頁要發http請求時，瀏覽器會先檢查是否有相應的cookie，有則自動添加在request header中的cookie字段中。這些是瀏覽器自動幫我們做的，而且每一次http請求瀏覽器都會自動幫我們做。這個特點很重要，因爲這關係到“什麼樣的數據適合存儲在cookie中”。

存儲在cookie中的數據，每次都會被瀏覽器自動放在http請求中，如果這些數據並不是每個請求都需要發給服務端的數據，瀏覽器這設置自動處理無疑增加了網絡開銷；但如果這些數據是每個請求都需要發給服務端的數據（比如身份認證信息），瀏覽器這設置自動處理就大大免去了重複添加操作。所以對於那種設置“每次請求都要攜帶的信息（最典型的就是身份認證信息）”就特別適合放在cookie中，其他類型的數據就不適合了。

4、特徵

1. 不同的瀏覽器存放的cookie位置不一樣，也是不能通用的。

2. cookie的存儲是以域名形式進行區分的，不同的域下存儲的cookie是獨立的。

3. 我們可以設置cookie生效的域（當前設置cookie所在域的子域），也就是說，我們能夠操作的cookie是當前域以及當前域下的所有子域

4. 一個域名下存放的cookie的個數是有限制的，不同的瀏覽器存放的個數不一樣,一般爲20個。

5. 每個cookie存放的內容大小也是有限制的，不同的瀏覽器存放大小不一樣，一般爲4KB。

6. cookie也可以設置過期的時間，默認是會話結束的時候，當時間到期自動銷燬

5、cookie值既可以設置，也可以讀取。

5.1 設置

5.1.1 客戶端設置

document.cookie = '名字=值';
document.cookie = 'username=cfangxu;domain=baike.baidu.com'   // 並且設置了生效域

注意： 客戶端可以設置cookie 的下列選項：expires、domain、path、secure（有條件：只有在https協議的網頁中，客戶端設置secure類型的 cookie 才能成功），但無法設置HttpOnly選項。

5.1.2 服務器端設置

不管你是請求一個資源文件（如 html/js/css/圖片），還是發送一個ajax請求，服務端都會返回response。而response header中有一項叫set-cookie，是服務端專門用來設置cookie的。

Set-Cookie 消息頭是一個字符串，其格式如下（中括號中的部分是可選的）：

Set-Cookie: value[; expires=date][; domain=domain][; path=path][; secure]

注意： 一個set-Cookie字段只能設置一個cookie，當你要想設置多個 cookie，需要添加同樣多的set-Cookie字段。
服務端可以設置cookie 的所有選項：expires、domain、path、secure、HttpOnly
通過 Set-Cookie 指定的這些可選項只會在瀏覽器端使用，而不會被髮送至服務器端。

5.2 讀取

我們通過document.cookie來獲取當前網站下的cookie的時候，得到的字符串形式的值，它包含了當前網站下所有的cookie（爲避免跨域腳本(xss)攻擊，這個方法只能獲取非 HttpOnly 類型的cookie）。它會把所有的cookie通過一個分號+空格的形式串聯起來，例如username=chenfangxu; job=coding

5.3 修改 cookie

要想修改一個cookie，只需要重新賦值就行，舊的值會被新的值覆蓋。但要注意一點，在設置新cookie時，path/domain這幾個選項一定要舊cookie 保持一樣。否則不會修改舊值，而是添加了一個新的 cookie。

5.4 刪除

把要刪除的cookie的過期時間設置成已過去的時間,path/domain/這幾個選項一定要舊cookie 保持一樣。

5.5注意

如果只設置一個值，那麼算cookie中的value; 設置的兩個cookie,key值如果設置的相同，下面的也會把上面的覆蓋。

6、cookie的屬性（可選項）

6.1過期時間

如果我們想長時間存放一個cookie。需要在設置這個cookie的時候同時給他設置一個過期的時間。如果不設置，cookie默認是臨時存儲的，當瀏覽器關閉進程的時候自動銷燬

注意：

document.cookie = '名稱=值;expires=' + GMT(格林威治時間)格式的日期型字符串;

一般設置天數：

 var date = new Date();
 date.setDate(date.getDate() + day);
 document.cookie = key+"="+value+";expires="+date.toGMTString()+";path="+path+";domain="+domain+";";

一個設置cookie時效性的例子

function setCookie(c_name, value, expiredays){
    var exdate=new Date();
    exdate.setDate(exdate.getDate() + expiredays);
    document.cookie=c_name+ "=" + escape(value) + ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}

使用方法：setCookie(‘username’,‘cfangxu’,30)
expires 是 http/1.0協議中的選項，在新的http/1.1協議中expires已經由 max-age 選項代替，兩者的作用都是限制cookie 的有效時間。expires的值是一個時間點（cookie失效時刻= expires），而max-age 的值是一個以秒爲單位時間段（cookie失效時刻= 創建時刻+ max-age）。
另外，max-age 的默認值是 -1(即有效期爲 session )；max-age有三種可能值：負數、0、正數。
負數：有效期session；
0：刪除cookie；
正數：有效期爲創建時刻+ max-age

7、cookie的域概念（domain選項）

domain指定了 cookie 將要被髮送至哪個或哪些域中。默認情況下，domain 會被設置爲創建該 cookie 的頁面所在的域名，所以當給相同域名發送請求時該 cookie 會被髮送至服務器。

瀏覽器會把 domain 的值與請求的域名做一個尾部比較（即從字符串的尾部開始比較），並將匹配的 cookie 發送至服務器。

7.1客戶端設置

document.cookie = "username=cfangxu;path=/;domain=qq.com"

如上：“www.qq.com" 與 “sports.qq.com” 公用一個關聯的域名"qq.com"，我們如果想讓 “sports.qq.com” 下的cookie被 “www.qq.com” 訪問，我們就需要用到 cookie 的domain屬性，並且需要把path屬性設置爲 “/”。

7.1服務端設置

Set-Cookie: username=cfangxu;path=/;domain=qq.com

注： ：一定的是同域之間的訪問，不能把domain的值設置成非主域的域名。

8、cookie的路徑概念（path選項）

• cookie 一般都是由於用戶訪問頁面而被創建的，可是並不是只有在創建 cookie 的頁面纔可以訪問這個 cookie。
• 因爲安全方面的考慮,默認情況下，只有與創建 >- cookie 的頁面在同一個目錄或子目錄下的網頁纔可以訪問。
• 即path屬性可以爲服務器特定文檔指定cookie，這個屬性設置的url且帶有這個前綴的url路徑都是有效的。

8.1客戶端設置

最常用的例子就是讓 cookie 在根目錄下,這樣不管是哪個子頁面創建的 cookie，所有的頁面都可以訪問到了。

document.cookie = "username=cfangxu; path=/"

8.2服務端設置

Set-Cookie:name=cfangxu; path=/blog

如上設置：path 選項值會與 /blog，/blogrool 等等相匹配；任何以 /blog 開頭的選項都是合法的。需要注意的是，只有在 domain 選項覈實完畢之後纔會對 path 屬性進行比較。path 屬性的默認值是發送 Set-Cookie 消息頭所對應的 URL 中的 path 部分。

9、domain和path總結：

domain是域名，path是路徑，兩者加起來就構成了 URL，domain和path一起來限制 cookie 能被哪些 URL 訪問。
所以domain和path2個選項共同決定了cookie何時被瀏覽器自動添加到請求頭部中發送出去。如果沒有設置這兩個選項，則會使用默認值。domain的默認值爲設置該cookie的網頁所在的域名，path默認值爲設置該cookie的網頁所在的目錄。

10、cookie的安全性（secure選項）

通常 cookie 信息都是使用HTTP連接傳遞數據，這種傳遞方式很容易被查看，所以 cookie 存儲的信息容易被竊取。假如 cookie 中所傳遞的內容比較重要，那麼就要求使用加密的數據傳輸。

secure選項用來設置cookie只在確保安全的請求中才會發送。當請求是HTTPS或者其他安全協議時，包含 secure 選項的 cookie 才能被髮送至服務器。

document.cookie = "username=cfangxu; secure"

把cookie設置爲secure，只保證 cookie 與服務器之間的數據傳輸過程加密，而保存在本地的 cookie文件並不加密。就算設置了secure 屬性也並不代表他人不能看到你機器本地保存的 cookie 信息。機密且敏感的信息絕不應該在 cookie 中存儲或傳輸，因爲 cookie 的整個機制原本都是不安全的

注意：如果想在客戶端即網頁中通過 js 去設置secure類型的 cookie，必須保證網頁是https協議的。在http協議的網頁中是無法設置secure類型cookie的。

11、httpOnly

• 這個選項用來設置cookie是否能通過 js 去訪問。默認情況下，cookie不會帶httpOnly選項(即爲空)，所以默認情況下，客戶端是可以通過js代碼去訪問（包括讀取、修改、刪除等）這個cookie的。當cookie帶httpOnly選項時，客戶端則無法通過js代碼去訪問（包括讀取、修改、刪除等）這個cookie。

• 在客戶端是不能通過js代碼去設置一個httpOnly類型的cookie的，這種類型的cookie只能通過服務端來設置。

12、cookie的編碼

cookie其實是個字符串，但這個字符串中等號、分號、空格被當做了特殊符號。所以當cookie的 key 和 value 中含有這3個特殊字符時，需要對其進行額外編碼，一般會用escape進行編碼，讀取時用unescape進行解碼；當然也可以用encodeURIComponent/decodeURIComponent或者encodeURI/decodeURI，查看關於編碼的介紹

13、第三方cookie

通常cookie的域和瀏覽器地址的域匹配，這被稱爲第一方cookie。那麼第三方cookie就是cookie的域和地址欄中的域不匹配，這種cookie通常被用在第三方廣告網站。爲了跟蹤用戶的瀏覽記錄，並且根據收集的用戶的瀏覽習慣，給用戶推送相關的廣告。
關於第三方cookie和cookie的安全問題可以查看https://mp.weixin.qq.com/s/oOGIuJCplPVW3BuIx9tNQg

14、 cookie推薦資源

聊一聊 cookie
HTTP cookies 詳解

二、localStorage（本地存儲）

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

1、特點

• 生命週期：持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。
  存儲的信息在同一域中是共享的。
  當本頁操作（新增、修改、刪除）了localStorage的時候，本頁面不會觸發storage事件,但是別的頁面會觸發storage事件。

• 大小：據說是5M（跟瀏覽器廠商有關係）
  在非IE下的瀏覽中可以本地打開。IE瀏覽器要在服務器中打開。
  localStorage本質上是對字符串的讀取，如果存儲內容多的話會消耗內存空間，會導致頁面變卡
  localStorage受同源策略的限制

1、定義和使用

• localStorage 和 sessionStorage 屬性允許在瀏覽器中存儲 key/value 對的數據。
• localStorage 用於長久保存整個網站的數據，保存的數據沒有過期時間，直到手動去刪除。
• localStorage 屬性是隻讀的。

2、設置

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

3、獲取

localStorage.getItem('username')

也可以獲取鍵名

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

4、刪除

localStorage.removeItem('username')

也可以一次性清除所有存儲

localStorage.clear()

5、storage事件

當storage發生改變的時候觸發。

注意： ： 當前頁面對storage的操作會觸發其他頁面的storage事件
事件的回調函數中有一個參數event,是一個

StorageEvent對象，提供了一些實用的屬性,如下表：
Property Type Description
key String The named key that was added, removed, or moddified
oldValue Any The previous value(now overwritten), or null if a new item was added
newValue Any The new value, or null if an item was added
url/uri String The page that called the method that triggered this change

6、localStorage 的優勢

1. localStorage 拓展了 cookie 的 4K 限制。
2. localStorage 會可以將第一次請求的數據直接存儲到本地，這個相當於一個 5M 大小的針對於前端頁面的數據庫，相比於 cookie 可以節約帶寬，但是這個卻是隻有在高版本的瀏覽器中才支持的。

7、localStorage 的侷限

1. 瀏覽器的大小不統一，並且在 IE8 以上的 IE 版本才支持 localStorage 這個屬性。
2. 目前所有的瀏覽器中都會把localStorage的值類型限定爲string類型，這個在對我們日常比較常見的JSON對象類型需要一些轉換。
3. localStorage在瀏覽器的隱私模式下面是不可讀取的。
4. localStorage本質上是對字符串的讀取，如果存儲內容多的話會消耗內存空間，會導致頁面變卡。
5. localStorage不能被爬蟲抓取到。

localStorage 與 sessionStorage 的唯一一點區別就是 localStorage 屬於永久性存儲，而 sessionStorage 屬於當會話結束的時候，sessionStorage 中的鍵值對會被清空。

8、localStorage 使用

首先在使用 localStorage 的時候，我們需要判斷瀏覽器是否支持 localStorage 這個屬性：

if(! window.localStorage){
    alert("瀏覽器不支持localstorage");
    return false;
}else{
    //主邏輯業務
}

localStorage 的寫入有三種方法:

if(！window.localStorage){
    alert("瀏覽器不支持localstorage");
    return false;
}else{
    var storage=window.localStorage;
    //寫入a字段
    storage["a"]=1;
    //寫入b字段
    storage.b=1;
    //寫入c字段
    storage.setItem("c",3);
    console.log(typeof storage["a"]);
    console.log(typeof storage["b"]);
    console.log(typeof storage["c"]);
}

這裏要特別說明一下 localStorage 的使用也是遵循同源策略的，所以不同的網站直接是不能共用相同的 localStorage。

不知道各位讀者有沒有注意到，剛剛存儲進去的是 int 類型，但是打印出來卻是 string 類型，這個與 localStorage 本身的特點有關，localStorage 只支持 string 類型的存儲。

• localStorage 的讀取

if(!window.localStorage){
    alert("瀏覽器不支持localstorage");
}else{
    var storage=window.localStorage;
    //寫入a字段
    storage["a"]=1;
    //寫入b字段
    storage.a=1;
    //寫入c字段
    storage.setItem("c",3);
    console.log(typeof storage["a"]);
    console.log(typeof storage["b"]);
    console.log(typeof storage["c"]);
    //第一種方法讀取
    var a=storage.a;
    console.log(a);
    //第二種方法讀取
    var b=storage["b"];
    console.log(b);
    //第三種方法讀取
    var c=storage.getItem("c");
    console.log(c);
}

這裏面是三種對 localStorage 的讀取，其中官方推薦的是 getItem\setItem 這兩種方法對其進行存取，不要問我這個爲什麼，因爲這個我也不知道。

我之前說過localStorage就是相當於一個前端的數據庫的東西，數據庫主要是增刪查改這四個步驟，這裏的讀取和寫入就相當於增、查的這兩個步驟。

下面我們就來說一說 localStorage 的刪、改這兩個步驟。
改這個步驟比較好理解，思路跟重新更改全局變量的值一樣，這裏我們就以一個爲例來簡單的說明一下：

if(!window.localStorage){
    alert("瀏覽器不支持localstorage");
}else{
var storage=window.localStorage;
    //寫入a字段
    storage["a"]=1;
    //寫入b字段
    storage.b=1;
    //寫入c字段
    storage.setItem("c",3);
    console.log(storage.a);
    // console.log(typeof storage["a"]);
    // console.log(typeof storage["b"]);
    // console.log(typeof storage["c"]);
    /*分割線*/
    storage.a=4;
    console.log(storage.a);
}

這個在控制檯上面我們就可以看到已經 a 鍵已經被更改爲 4 了。

• localStorage 的刪除

1、將localStorage的所有內容清除

var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.clear();
console.log(storage);

2、 將 localStorage 中的某個鍵值對刪除

var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
console.log(storage);
storage.removeItem("a");
console.log(storage.a);

• localStorage 鍵的獲取

var storage=window.localStorage;
storage.a=1;
storage.setItem("c",3);
for(var i=0;i<storage.length;i++){
    var key=storage.key(i);
    console.log(key);
}

使用 key() 方法，向其中出入索引即可獲取對應的鍵。

9、localStorage 其他注意事項

一般我們會將 JSON 存入 localStorage 中，但是在 localStorage 會自動將 localStorage 轉換成爲字符串形式。

這個時候我們可以使用 JSON.stringify() 這個方法，來將 JSON 轉換成爲 JSON 字符串。

if(!window.localStorage){
    alert("瀏覽器不支持localstorage");
}else{
    var storage=window.localStorage;
    var data={
        name:'xiecanyong',
        sex:'man',
        hobby:'program'
    };
    var d=JSON.stringify(data);
    storage.setItem("data",d);
    console.log(storage.data);
}

讀取之後要將 JSON 字符串轉換成爲 JSON 對象，使用 JSON.parse() 方法：

var storage=window.localStorage;
var data={
    name:'xiecanyong',
    sex:'man',
    hobby:'program'
};
var d=JSON.stringify(data);
storage.setItem("data",d);
//將JSON字符串轉換成爲JSON對象輸出
var json=storage.getItem("data");
var jsonObj=JSON.parse(json);
console.log(typeof jsonObj);

打印出來是 Object 對象。

另外還有一點要注意的是，其他類型讀取出來也要進行轉換。

三、 sessionStorage

其實跟localStorage差不多，也是本地存儲，會話本地存儲

1、特點：

• 用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問並且當會話結束後數據也隨之銷燬。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。也就是說只要這個瀏覽器窗口沒有關閉，即使刷新頁面或進入同源另一頁面，數據仍然存在。關閉窗口後，sessionStorage即被銷燬，或者在新窗口打開同源的另一個頁面，sessionStorage也是沒有的。

2、cookie、localStorage、sessionStorage區別

相同：在本地（瀏覽器端）存儲數據

不同：

• localStorage、sessionStorage
• localStorage只要在相同的協議、相同的主機名、相同的端口下，就能讀取/修改到同一份localStorage數據。
• sessionStorage比localStorage更嚴苛一點，除了協議、主機名、端口外，還要求在同一窗口（也就是瀏覽器的標籤頁）下。
• localStorage是永久存儲，除非手動刪除。
• sessionStorage當會話結束（當前頁面關閉的時候，自動銷燬）
• cookie的數據會在每一次發送http請求的時候，同時發送給服務器而localStorage、sessionStorage不會。

3、擴展其他的前端存儲方式（不常用）

3.1 web SQL database

先說個會被取代的，爲什麼會被取代，主要有以下幾個原因：

1. W3C捨棄 Web SQL database草案,而且是在2010年年底，規範不支持了，瀏覽器廠商已經支持的就支持了，沒有支持的也不打算支持了，比如IE和Firefox。
2. 爲什麼要捨棄？因爲 Web SQL database 本質上是一個關係型數據庫，後端可能熟悉，但是前端就有很多不熟悉了，雖然SQL的簡單操作不難，但是也得需要學習。
3. SQL熟悉後，真實操作中還得把你要存儲的東西，比如對象，轉成SQL語句，也挺麻煩的。

3.2 indexedDB

來自MDN的解釋： indexedDB 是一種低級API，用於客戶端存儲大量結構化數據(包括, 文件/ blobs)。該API使用索引來實現對該數據的高性能搜索。雖然 Web Storage 對於存儲較少量的數據很有用，但對於存儲更大量的結構化數據來說，這種方法不太有用。IndexedDB提供了一個解決方案。

所以，IndexedDB API是強大的，但對於簡單的情況可能看起來太複雜了，所以要看你的業務場景來選擇到底是用還是不用。

indexedDB 是一個基於JavaScript的面向對象的數據庫。 IndexedDB允許你存儲和檢索用鍵索引的對象;

IndexedDB 鼓勵使用的基本模式如下所示：

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

4、首先打開indexedDB數據庫

4.1 語法：

window.indexedDB.open(dbName, version)

var db;
// 打開數據庫,open還有第二個參數版本號
var request = window.indexedDB.open('myTestDatabase');
// 數據庫打開成功後
request.onsuccess = function (event) {
    // 存儲數據結果,後面所有的數據庫操作都離不開它。
    db = request.result;
}
request.onerror = function (event) {
    alert("Why didn't you allow my web app to use IndexedDB?!");
}

// 數據庫首次創建版本，或者window.indexedDB.open傳遞的新版本（版本數值要比現在的高）
request.onupgradeneeded = function (event) {

}

onupgradeneeded事件： 更新數據庫的 schema，也就是創建或者刪除對象存儲空間，這個事件將會作爲一個允許你處理對象存儲空間的 versionchange 事務的一部分被調用。在數據庫第一次被打開時或者當指定的版本號高於當前被持久化的數據庫的版本號時，這個 versionchange 事務將被創建。onupgradeneeded 是我們唯一可以修改數據庫結構的地方。在這裏面，我們可以創建和刪除對象存儲空間以及構建和刪除索引。

5、構建數據庫

IndexedDB 使用對象存儲空間而不是表，並且一個單獨的數據庫可以包含任意數量的對象存儲空間。每當一個值被存儲進一個對象存儲空間時，它會被和一個鍵相關聯。

  // 數據庫首次創建版本，或者window.indexedDB.open傳遞的新版本（版本數值要比現在的高）
  request.onupgradeneeded = function (event) {

      //之前咱們不是在success中得到了db了麼，爲什麼還要在這獲取，
      //因爲在當前事件函數執行後纔會去執行success事件
      var db = event.target.result;

      // 創建一個對象存儲空間，keyPath是id，keyGenerator是自增的
      var objectStore = db.createObjectStore('testItem',{keyPath: 'id',autoIncrement: true});
      // 創建一個索引來通過id搜索，id是自增的，不會有重複，所以可以用唯一索引
      objectStore.createIndex('id','id',{unique: true})

      objectStore.createIndex('name','name');
      objectStore.createIndex('age','age');

      //添加一條信息道數據庫中
      objectStore.add({name: 'cfangxu', age: '27'});

  }

注意： 執行完後，在調試工具欄Application的indexedDB中也看不到，你得右鍵刷新一下。

• 創建索引的語法：

objectStore.createIndex(indexName, keyPath, objectParameters)

• indexName:創建的索引名稱，可以使用空名稱作爲索引。
• keyPath:索引使用的關鍵路徑，可以使用空的keyPath, 或者keyPath傳爲數組keyPath也是可以的。
• objectParameters:可選參數。常用參數之一是
• unique，表示該字段值是否唯一，不能重複。例如，本demo中id是不能重複的，於是有設置：

6、添加數據

上面的代碼建好了字段，並且添加了一條數據，但是我們如果想在onupgradeneeded事件外面操作，接下來的步驟了。
由於數據庫的操作都是基於事務（transaction）來進行，於是，無論是添加編輯還是刪除數據庫，我們都要先建立一個事務（transaction），然後才能繼續下面的操作。

-語法：

 var transaction = db.transaction(dbName, "readwrite");

第一個參數是事務希望跨越的對象存儲空間的列表，可以是數組或者字符串。如果你希望事務能夠跨越所有的對象存儲空間你可以傳入一個空數組。如果你沒有爲第二個參數指定任何內容，你得到的是隻讀事務。因爲這裏我們是想要寫入所以我們需要傳入 “readwrite” 標識。

var timer = setInterval(function () {
    if(db) {
        clearInterval(timer);
        // 新建一個事務
        var transaction = db.transaction(['testItem'], 'readwrite');
        // 打開一個存儲對象
        var objectStore = transaction.objectStore('testItem');
        // 添加數據到對象中
        objectStore.add({ name: 'xiaoming', age: '12' });
        objectStore.add({ name: 'xiaolong', age: '20' });
    }
},100)

爲什麼要用一個間隔定時器？ 因爲這是一個demo，正常的是要有操作才能進行數據庫的寫入，在我們的demo中，js執行到transaction會比indexedDB的onsuccess事件回調快，導致會拿到db爲undefined，所以寫了個間隔定時器等它一會。

7、獲取數據

var transaction = db.transaction(['testItem'], 'readwrite');

var objectStore = transaction.objectStore('testItem');

var getRquest = objectStore.get(1);
getRquest.onsuccess = function (event) {
    console.log(getRquest.result);
}
//輸出：{name: "cfangxu", age: "27", id: 1}

8、修改數據

var transaction = db.transaction(['testItem'], 'readwrite');

var objectStore = transaction.objectStore('testItem');

var getRquest = objectStore.put({ name: 'chenfangxu', age: '27', id:1 });
// 修改了id爲1的那條數據

9、刪除數據

var transaction = db.transaction(['testItem'], 'readwrite');

var objectStore = transaction.objectStore('testItem');

var getRquest = objectStore.delete(1);
// 刪除了id爲1的那條數據
上面的例子執行完後，一定一定要右鍵刷新indexedDB,它自己是不會變的。

四、後記

喜歡的小夥伴可以關注哦；
你的鼓勵是我最大的動力。