IndexedDB(結(jié)構(gòu)化)
nosql類型的數(shù)據(jù)存儲方式
不需要寫sql語句
定義
IndexedDB 是一種底層 API,用于在客戶端存儲大量的結(jié)構(gòu)化數(shù)據(jù)
應(yīng)用場景
客戶端(瀏覽器)
大量的數(shù)據(jù)
結(jié)構(gòu)化數(shù)據(jù)(類似 object對象 有鍵有值)
不是關(guān)系型(通過sql查詢)
存儲位置
瀏覽器中
application中
底層API
操作起來相對復(fù)雜
可選擇第三方工具
IndexedDB API是強(qiáng)大的厅缺,但對于簡單的情況可能看起來太復(fù)雜盒齿。如果你更喜歡一個簡單的API跪但,請嘗試? localForage贩耐、dexie.js洽损、PouchDB蛉幸、idb肖粮、idb-keyval孤页、JsStore 或者 lovefield? 之類的庫,這些庫使 IndexedDB 對開發(fā)者來說更加友好涩馆。
同源策略
正如大多數(shù)的 web 儲存解決方案一樣行施,IndexedDB 也遵守同源策略。因此當(dāng)你在某個域名下操作儲存數(shù)據(jù)的時候魂那,你不能操作其他域名下的數(shù)據(jù)
事務(wù)型數(shù)據(jù)庫系統(tǒng)(ORM)
所有操作 都是通過事務(wù)對象(transaction)進(jìn)行操作
使用
1.打開數(shù)據(jù)庫 -> IDBRequest(請求對象)
open
IDBFactory.open 方法用于打開一個數(shù)據(jù)庫連接蛾号。本方法立即返回一個 IDBOpenDBRequest 對象,但打開數(shù)據(jù)庫的操作是異步執(zhí)行的
連接數(shù)據(jù)庫在一個單獨(dú)的線程中進(jìn)行涯雅,包括以下幾個步驟
指定數(shù)據(jù)庫已經(jīng)存在時:
等待 versionchange 操作完成鲜结。
如果數(shù)據(jù)庫已計(jì)劃刪除,那等著刪除完成活逆。
如果已有數(shù)據(jù)庫版本高于給定的 version精刷,中止操作并返回類型為 VersionError 的 DOMError 。
如果已有數(shù)據(jù)庫版本低于給定的 version蔗候,觸發(fā)一個 versionchange 操作怒允。
如果數(shù)據(jù)庫不存在,創(chuàng)建指定名稱的數(shù)據(jù)庫锈遥,將版本號設(shè)置為給定版本纫事,如果給定版本號,則設(shè)置為1所灸,and no object stores.
創(chuàng)建數(shù)據(jù)庫連接丽惶。
2.獲得數(shù)據(jù)庫對象
監(jiān)聽事件獲得(注意 打開數(shù)據(jù)庫是異步)
IDBRequest->result屬性 數(shù)據(jù)庫對象
upgradeneeded
檢測到有新版本的時候觸發(fā)
第一次打開數(shù)據(jù)庫(如果沒有數(shù)據(jù)庫->新建數(shù)據(jù)庫(也可以有多個數(shù)據(jù)庫))
建ObjectStore(DB.createObjectStore("user",{keyPath:"有唯一值的index"});)
建index(os.createIndex("鍵名","鍵路徑",可選項(xiàng));)
建index
建index
建ObjectStore(note)
建index(title)
建index(createTime)
建index(content)
success
每一次打開都會調(diào)用
error
3.通過數(shù)據(jù)庫對象獲得事務(wù)對象(db.tansaction())
增刪改查
1.獲取事務(wù)對象
指定權(quán)限
2.獲取你要操作的OS(objecctStore)
3.增刪改查
添加數(shù)據(jù)add()
? ? ? ? let ts = DB.transaction(["hero"],"readwrite");
? ? ? ? let os = ts.objectStore("hero");
? ? ? ? //會返回一個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);
? ?