IndexedDB（結(jié)構(gòu)化）
nosql類型的數(shù)據(jù)存儲(chǔ)方式
不需要寫sql語(yǔ)句
定義
IndexedDB 是一種底層 API，用于在客戶端存儲(chǔ)大量的結(jié)構(gòu)化數(shù)據(jù)
應(yīng)用場(chǎng)景
客戶端（瀏覽器）
大量的數(shù)據(jù)
結(jié)構(gòu)化數(shù)據(jù)（類似 object對(duì)象 有鍵有值）
不是關(guān)系型（通過(guò)sql查詢）
存儲(chǔ)位置
瀏覽器中
application中
底層API
操作起來(lái)相對(duì)復(fù)雜
可選擇第三方工具
IndexedDB API是強(qiáng)大的，但對(duì)于簡(jiǎn)單的情況可能看起來(lái)太復(fù)雜。如果你更喜歡一個(gè)簡(jiǎn)單的API，請(qǐng)嘗試? localForage嗤疯、dexie.js、PouchDB、idb亥鬓、idb-keyval、JsStore 或者 lovefield? 之類的庫(kù)域庇，這些庫(kù)使 IndexedDB 對(duì)開(kāi)發(fā)者來(lái)說(shuō)更加友好嵌戈。
同源策略
正如大多數(shù)的 web 儲(chǔ)存解決方案一樣，IndexedDB 也遵守同源策略听皿。因此當(dāng)你在某個(gè)域名下操作儲(chǔ)存數(shù)據(jù)的時(shí)候熟呛，你不能操作其他域名下的數(shù)據(jù)
事務(wù)型數(shù)據(jù)庫(kù)系統(tǒng)（ORM）
所有操作 都是通過(guò)事務(wù)對(duì)象（transaction）進(jìn)行操作
使用
1.打開(kāi)數(shù)據(jù)庫(kù) -> IDBRequest(請(qǐng)求對(duì)象)
open
IDBFactory.open 方法用于打開(kāi)一個(gè)數(shù)據(jù)庫(kù)連接。本方法立即返回一個(gè) IDBOpenDBRequest 對(duì)象尉姨，但打開(kāi)數(shù)據(jù)庫(kù)的操作是異步執(zhí)行的
連接數(shù)據(jù)庫(kù)在一個(gè)單獨(dú)的線程中進(jìn)行庵朝，包括以下幾個(gè)步驟
指定數(shù)據(jù)庫(kù)已經(jīng)存在時(shí)：
等待 versionchange 操作完成。
如果數(shù)據(jù)庫(kù)已計(jì)劃刪除又厉，那等著刪除完成九府。
如果已有數(shù)據(jù)庫(kù)版本高于給定的 version，中止操作并返回類型為 VersionError 的 DOMError 覆致。
如果已有數(shù)據(jù)庫(kù)版本低于給定的 version侄旬，觸發(fā)一個(gè) versionchange 操作。
如果數(shù)據(jù)庫(kù)不存在煌妈，創(chuàng)建指定名稱的數(shù)據(jù)庫(kù)儡羔，將版本號(hào)設(shè)置為給定版本，如果給定版本號(hào)璧诵，則設(shè)置為1汰蜘，and no object stores.
創(chuàng)建數(shù)據(jù)庫(kù)連接。
2.獲得數(shù)據(jù)庫(kù)對(duì)象
監(jiān)聽(tīng)事件獲得（注意 打開(kāi)數(shù)據(jù)庫(kù)是異步）
IDBRequest->result屬性 數(shù)據(jù)庫(kù)對(duì)象
upgradeneeded
檢測(cè)到有新版本的時(shí)候觸發(fā)
第一次打開(kāi)數(shù)據(jù)庫(kù)（如果沒(méi)有數(shù)據(jù)庫(kù)->新建數(shù)據(jù)庫(kù)(也可以有多個(gè)數(shù)據(jù)庫(kù))）
建ObjectStore（DB.createObjectStore("user",{keyPath:"有唯一值的index"});）
建index（os.createIndex("鍵名","鍵路徑"腮猖，可選項(xiàng));）
建index
建index
建ObjectStore（note）
建index(title)
建index(createTime)
建index(content)
success
每一次打開(kāi)都會(huì)調(diào)用
error
3.通過(guò)數(shù)據(jù)庫(kù)對(duì)象獲得事務(wù)對(duì)象（db.tansaction()）
增刪改查
1.獲取事務(wù)對(duì)象
指定權(quán)限
2.獲取你要操作的OS(objecctStore)
3.增刪改查
添加數(shù)據(jù)add()
? ? ? ? let ts = DB.transaction(["hero"],"readwrite");
? ? ? ? let os = ts.objectStore("hero");
? ? ? ? //會(huì)返回一個(gè)IDBRequest
? ? ? ? let request = os.add(data);
? ? ? ? request.onsuccess = ()=>{
? ? ? ? ? ? console.log("添加數(shù)據(jù)成功")
? ? ? ? ? ? loadAll();
? ? ? ? }
? ? ? ? request.onerror = err=>{console.warn(err)}
查詢數(shù)據(jù)
getAll 查詢所有數(shù)據(jù)（ie不支持）
? ? ? ? let os = DB.transaction(["hero"],"readwrite").objectStore("hero");
? ? ? ? let request = os.getAll();
? ? ? ? request.onsuccess = function (){
? ? ? ? ? ? console.log(this.result);
? ? ? ? ? ? let ul = ele(".hero_container");
? ? ? ? ? ? let liStr = "";
? ? ? ? ? ? this.result.forEach(item=>{
? ? ? ? ? ? ? ? let li = `<li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <p>名字：<span>${item.name}</span></p>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <p>血量：<span>${item.blood}</span></p>
? ? ? ? ? ? ? ? ? ? ? ? ? ? <p>攻擊：<span>${item.att}</span></p>
? ? ? ? ? ? ? ? ? ? ? ? ? </li>`;
? ? ? ? ? ? ? ? liStr+=li;
? ? ? ? ? ? });
? ? ? ? ? ? ul.innerHTML = liStr;
? ? ? ? }
? ? ? ? request.onerror = err=>{console.warn(err)}
get查詢指定數(shù)據(jù)
? ? ? ? let os = DB.transaction("hero").objectStore("hero");
? ? ? ? //指定要查詢的索引及對(duì)應(yīng)的內(nèi)容
? ? ? ? let request = os.index("name").get(searchContent);
? ? ? ? request.onsuccess = function () {
? ? ? ? ? ? console.log(this.result);
? ? ? ? }
? ? ? ? request.onerror = error=>{console.warn(error)}
刪除數(shù)據(jù)
delete
? ? ? ? ? ? ? ? let content = this.children[0].children[0].textContent;
? ? ? ? ? ? ? ? let os = DB.transaction("hero","readwrite").objectStore("hero");
? ? ? ? ? ? ? ? let request = os.delete(content);
? ? ? ? ? ? ? ? request.onsuccess = ()=>{
? ? ? ? ? ? ? ? ? ? console.log("刪除成功")
? ? ? ? ? ? ? ? ? ? loadAll()
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? ? request.onerror = err=>{console.warn(err)}
clear
? ? ? ? let os = DB.transaction("hero","readwrite").objectStore("hero");
? ? ? ? let request = os.clear();
? ? ? ? request.onsuccess = ()=>{
? ? ? ? ? ? console.log("清除成功")
? ? ? ? ? ? loadAll()
? ? ? ? }
? ? ? ? request.onerror = err=>{console.log(err)}
注意：
每一次更新objectStore都要清除緩存（或者直接刪除數(shù)據(jù)庫(kù)）
Uncaught TypeError: Cannot read property 'transaction' of null
? ? at xxx
打開(kāi)數(shù)據(jù)庫(kù) 是異步的->使用DB的時(shí)候 還未獲得到數(shù)據(jù)庫(kù)對(duì)象
