IndexedDB(結(jié)構(gòu)化)

nosql類型的數(shù)據(jù)存儲(chǔ)方式

不需要寫sql語句

定義

IndexedDB 是一種底層 API,用于在客戶端存儲(chǔ)大量的結(jié)構(gòu)化數(shù)據(jù)

應(yīng)用場景

客戶端(瀏覽器)

大量的數(shù)據(jù)

結(jié)構(gòu)化數(shù)據(jù)(類似 object對(duì)象 有鍵有值)

不是關(guān)系型(通過sql查詢)

存儲(chǔ)位置

瀏覽器中

application中

底層API

操作起來相對(duì)復(fù)雜

可選擇第三方工具

IndexedDB API是強(qiáng)大的烤镐,但對(duì)于簡單的情況可能看起來太復(fù)雜蛋济。如果你更喜歡一個(gè)簡單的API,請(qǐng)嘗試? localForage炮叶、dexie.js碗旅、PouchDB、idb镜悉、idb-keyval祟辟、JsStore 或者 lovefield? 之類的庫,這些庫使 IndexedDB 對(duì)開發(fā)者來說更加友好积瞒。

同源策略

正如大多數(shù)的 web 儲(chǔ)存解決方案一樣川尖,IndexedDB 也遵守同源策略登下。因此當(dāng)你在某個(gè)域名下操作儲(chǔ)存數(shù)據(jù)的時(shí)候茫孔,你不能操作其他域名下的數(shù)據(jù)

事務(wù)型數(shù)據(jù)庫系統(tǒng)(ORM)

所有操作 都是通過事務(wù)對(duì)象(transaction)進(jìn)行操作

使用

1.打開數(shù)據(jù)庫 -> IDBRequest(請(qǐng)求對(duì)象)

open

IDBFactory.open 方法用于打開一個(gè)數(shù)據(jù)庫連接叮喳。本方法立即返回一個(gè) IDBOpenDBRequest 對(duì)象,但打開數(shù)據(jù)庫的操作是異步執(zhí)行的

連接數(shù)據(jù)庫在一個(gè)單獨(dú)的線程中進(jìn)行缰贝,包括以下幾個(gè)步驟

指定數(shù)據(jù)庫已經(jīng)存在時(shí):

等待 versionchange 操作完成馍悟。

如果數(shù)據(jù)庫已計(jì)劃刪除,那等著刪除完成剩晴。

如果已有數(shù)據(jù)庫版本高于給定的 version锣咒,中止操作并返回類型為 VersionError 的 DOMError 。

如果已有數(shù)據(jù)庫版本低于給定的 version赞弥,觸發(fā)一個(gè) versionchange 操作毅整。

如果數(shù)據(jù)庫不存在,創(chuàng)建指定名稱的數(shù)據(jù)庫绽左,將版本號(hào)設(shè)置為給定版本悼嫉,如果給定版本號(hào),則設(shè)置為1拼窥,and no object stores.

創(chuàng)建數(shù)據(jù)庫連接戏蔑。

2.獲得數(shù)據(jù)庫對(duì)象

監(jiān)聽事件獲得(注意 打開數(shù)據(jù)庫是異步)

IDBRequest->result屬性 數(shù)據(jù)庫對(duì)象

upgradeneeded

檢測(cè)到有新版本的時(shí)候觸發(fā)

第一次打開數(shù)據(jù)庫(如果沒有數(shù)據(jù)庫->新建數(shù)據(jù)庫(也可以有多個(gè)數(shù)據(jù)庫))

建ObjectStore(DB.createObjectStore("user",{keyPath:"有唯一值的index"});)

建index(os.createIndex("鍵名","鍵路徑",可選項(xiàng));)

建index

建index

建ObjectStore(note)

建index(title)

建index(createTime)

建index(content)

success

每一次打開都會(huì)調(diào)用

error

3.通過數(shù)據(jù)庫對(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);

? ?

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末鲁纠,一起剝皮案震驚了整個(gè)濱河市总棵,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌改含,老刑警劉巖情龄,帶你破解...
    沈念sama閱讀 211,348評(píng)論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異捍壤,居然都是意外死亡刃唤,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,122評(píng)論 2 385
  • 文/潘曉璐 我一進(jìn)店門白群,熙熙樓的掌柜王于貴愁眉苦臉地迎上來尚胞,“玉大人,你說我怎么就攤上這事帜慢×眩” “怎么了?”我有些...
    開封第一講書人閱讀 156,936評(píng)論 0 347
  • 文/不壞的土叔 我叫張陵粱玲,是天一觀的道長躬柬。 經(jīng)常有香客問我,道長抽减,這世上最難降的妖魔是什么允青? 我笑而不...
    開封第一講書人閱讀 56,427評(píng)論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮卵沉,結(jié)果婚禮上颠锉,老公的妹妹穿的比我還像新娘法牲。我一直安慰自己,他們只是感情好琼掠,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,467評(píng)論 6 385
  • 文/花漫 我一把揭開白布拒垃。 她就那樣靜靜地躺著,像睡著了一般瓷蛙。 火紅的嫁衣襯著肌膚如雪悼瓮。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,785評(píng)論 1 290
  • 那天艰猬,我揣著相機(jī)與錄音横堡,去河邊找鬼。 笑死冠桃,一個(gè)胖子當(dāng)著我的面吹牛翅萤,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播腊满,決...
    沈念sama閱讀 38,931評(píng)論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼套么,長吁一口氣:“原來是場噩夢(mèng)啊……” “哼!你這毒婦竟也來了碳蛋?” 一聲冷哼從身側(cè)響起胚泌,我...
    開封第一講書人閱讀 37,696評(píng)論 0 266
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎肃弟,沒想到半個(gè)月后玷室,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,141評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡笤受,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,483評(píng)論 2 327
  • 正文 我和宋清朗相戀三年穷缤,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片箩兽。...
    茶點(diǎn)故事閱讀 38,625評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡津肛,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出汗贫,到底是詐尸還是另有隱情身坐,我是刑警寧澤,帶...
    沈念sama閱讀 34,291評(píng)論 4 329
  • 正文 年R本政府宣布落包,位于F島的核電站部蛇,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏咐蝇。R本人自食惡果不足惜涯鲁,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,892評(píng)論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧抹腿,春花似錦岛请、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,741評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽许师。三九已至房蝉,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間微渠,已是汗流浹背搭幻。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評(píng)論 1 265
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留逞盆,地道東北人檀蹋。 一個(gè)月前我還...
    沈念sama閱讀 46,324評(píng)論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像云芦,于是被迫代替她去往敵國和親俯逾。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,492評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容

  • 問題 頁面如果表現(xiàn)不符合預(yù)期舅逸,前端工程師在沒有 javascript 日志的情況下桌肴,很難 debug。所以就需要針...
    唯泥Bernie閱讀 1,273評(píng)論 0 1
  • IndexedDB 是一個(gè)基于 JavaScript 的面向?qū)ο蟮氖聞?wù)型數(shù)據(jù)庫琉历。有了LocalStorage和Co...
    cc_a818閱讀 1,161評(píng)論 0 0
  • 1.概述 現(xiàn)有的瀏覽器數(shù)據(jù)儲(chǔ)存方案坠七,都不適合儲(chǔ)存大量數(shù)據(jù):Cookie 的大小不超過 4KB,且每次請(qǐng)求都會(huì)發(fā)送回...
    Kevin丶CK閱讀 1,020評(píng)論 0 2
  • 基于Web的離線緩存indexedDB IndexedDB是一種底層API旗笔,用于客戶端存儲(chǔ)大量結(jié)構(gòu)化數(shù)據(jù)(包括, ...
    ayusong870閱讀 310評(píng)論 0 2
  • 今天感恩節(jié)哎彪置,感謝一直在我身邊的親朋好友。感恩相遇蝇恶!感恩不離不棄拳魁。 中午開了第一次的黨會(huì),身份的轉(zhuǎn)變要...
    迷月閃星情閱讀 10,559評(píng)論 0 11