深入解析HTML5的IndexedDB索引數據庫

2020-03-24 17:40:04

字體：大中小

來源：轉載

供稿：網友

介紹
IndexedDB是HTML5 WEB數據庫，允許HTML5 WEB應用在用戶瀏覽器端存儲數據。對于應用來說IndexedDB非常強大、有用，可以在客戶端的chrome,IE,Firefox等WEB瀏覽器中存儲大量數據，下面簡單介紹一下IndexedDB的基本概念。

什么是IndexedDB
IndexedDB，HTML5新的數據存儲，可以在客戶端存儲、操作數據，可以使應用加載地更快，更好地響應。它不同于關系型數據庫，擁有數據表、記錄。它影響著我們設計和創建html' target='_blank'>應用程序的方式。IndexedDB 創建有數據類型和簡單的JavaScript持久對象的object，每個object可以有索引，使其有效地查詢和遍歷整個集合。本文為您提供了如何在Web應用程序中使用IndexedDB的真實例子。

開始
我們需要在執行前包含下面前置代碼JavaScript Code復制內容到剪貼板
varindexedDB=window.indexedDB||window.mozIndexedDB||window.webkitIndexedDB||window.msIndexedDB; //prefixesofwindow.IDBobjects varIDBTransaction=window.IDBTransaction||window.webkitIDBTransaction||window.msIDBTransaction; varIDBKeyRange=window.IDBKeyRange||window.webkitIDBKeyRange||window.msIDBKeyRange if(!indexedDB){ alert( Yourbrowserdoesn'tsupportastableversionofIndexedDB. ) }

打開IndexedDB
在創建數據庫之前，我們首先需要為數據庫創建數據，假設我們有如下的用戶信息：JavaScript Code復制內容到剪貼板
varuserData=[ {id: 1 ,name: Tapas ,age:33,email: tapas@example.com }, {id: 2 ,name: Bidulata ,age:55,email: bidu@home.com } ];
vardb; varrequest=indexedDB.open( databaseName ,1); request.onerror=function(e){ console.log( error: ,e); }; request.onsuccess=function(e){ db=request.result; console.log( success: +db); }; request.onupgradeneeded=function(e){ }
如上所示，我們已經打開了名為 databaseName ，指定版本號的數據庫，open()方法有兩個參數：
1.第一個參數是數據庫名稱，它會檢測名稱為 databaseName 的數據庫是否已經存在，如果存在則打開它，否則創建新的數據庫。
2.第二個參數是數據庫的版本，用于用戶更新數據庫結構。

onSuccess處理
發生成功事件時 onSuccess 被觸發，如果所有成功的請求都在此處理，我們可以通過賦值給db變量保存請求的結果供以后使用。

onerror的處理程序
發生錯誤事件時 onerror 被觸發，如果打開數據庫的過程中失敗。

Onupgradeneeded處理程序
如果你想更新數據庫（創建，刪除或修改數據庫），那么你必須實現onupgradeneeded處理程序，使您可以在數據庫中做任何更改。在 onupgradeneeded 處理程序中是可以改變數據庫的結構的唯一地方。

創建和添加數據到表：
IndexedDB使用對象存儲來存儲數據，而不是通過表。每當一個值存儲在對象存儲中，它與一個鍵相關聯。它允許我們創建的任何對象存儲索引。索引允許我們訪問存儲在對象存儲中的值。下面的代碼顯示了如何創建對象存儲并插入預先準備好的數據：JavaScript Code復制內容到剪貼板
request.onupgradeneeded=function(event){ varobjectStore=event.target.result.createObjectStore( users ,{keyPath: id }); for(variinuserData){ objectStore.add(userData[i]); } }
我們使用createObjectStore（）方法創建一個對象存儲。此方法接受兩個參數： - 存儲的名稱和參數對象。在這里，我們有一個名為 users 的對象存儲，并定義了keyPath，這是對象唯一性的屬性。在這里，我們使用 id 作為keyPath，這個值在對象存儲中是唯一的，我們必須確保該 ID 的屬性在對象存儲中的每個對象中存在。一旦創建了對象存儲，我們可以開始使用for循環添加數據進去。

手動將數據添加到表：
我們可以手動添加額外的數據到數據庫中。JavaScript Code復制內容到剪貼板
functionAdd(){ varrequest=db.transaction([ users ], readwrite ).objectStore( users ) .add({id: 3 ,name: Gautam ,age:30,email: gautam@store.org }); request.onsuccess=function(e){ alert( Gautamhasbeenaddedtothedatabase. }; request.onerror=function(e){ alert( Unabletoaddtheinformation. } }
之前我們在數據庫中做任何的CRUD操作（讀，寫，修改），必須使用事務。該transaction()方法是用來指定我們想要進行事務處理的對象存儲。 transaction()方法接受3個參數（第二個和第三個是可選的）。第一個是我們要處理的對象存儲的列表，第二個指定我們是否要只讀/讀寫，第三個是版本變化。

從表中讀取數據
get()方法用于從對象存儲中檢索數據。我們之前已經設置對象的id作為的keyPath，所以get()方法將查找具有相同id值的對象。下面的代碼將返回我們命名為 Bidulata 的對象：JavaScript Code復制內容到剪貼板
functionRead(){ varobjectStore=db.transaction([ users ]).objectStore( users varrequest=objectStore.get( 2 request.onerror=function(event){ alert( Unabletoretrievedatafromdatabase! }; request.onsuccess=function(event){ if(request.result){ alert( Name: +request.result.name+ ,Age: +request.result.age+ ,Email: +request.result.email); }else{ alert( Bidulatacouldn'tbefoundinyourdatabase! } }; }

從表中讀取所有數據
下面的方法檢索表中的所有數據。這里我們使用游標來檢索對象存儲中的所有數據：JavaScript Code復制內容到剪貼板
functionReadAll(){ varobjectStore=db.transaction( users ).objectStore( users varreq=objectStore.openCursor(); req.onsuccess=function(event){ db.close(); varres=event.target.result; if(res){ alert( Key +res.key+ is +res.value.name+ ,Age: +res.value.age+ ,Email: +res.value.email); res.continue(); } }; req.onerror=function(e){ console.log( ErrorGetting: ,e); }; }
該openCursor()用于遍歷數據庫中的多個記錄。在continue()函數中繼續讀取下一條記錄。
刪除表中的記錄
下面的方法從對象中刪除記錄。JavaScript Code復制內容到剪貼板
functionRemove(){ varrequest=db.transaction([ users ], readwrite ).objectStore( users ).delete( 1 request.onsuccess=function(event){ alert( Tapas'sentryhasbeenremovedfromyourdatabase. }; }
我們要將對象的keyPath作為參數傳遞給delete()方法。

最終代碼
下面的方法從對象源中刪除一條記錄：JavaScript Code復制內容到剪貼板
head metahttp-equiv= Content-Type content= text/html;charset=utf-8 / title IndexedDB /title scripttype= text/javascript varindexedDB=window.indexedDB||window.mozIndexedDB||window.webkitIndexedDB||window.msIndexedDB; //prefixesofwindow.IDBobjects varIDBTransaction=window.IDBTransaction||window.webkitIDBTransaction||window.msIDBTransaction; varIDBKeyRange=window.IDBKeyRange||window.webkitIDBKeyRange||window.msIDBKeyRange if(!indexedDB){ alert( Yourbrowserdoesn'tsupportastableversionofIndexedDB. ) } varcustomerData=[ {id: 1 ,name: Tapas ,age:33,email: tapas@example.com }, {id: 2 ,name: Bidulata ,age:55,email: bidu@home.com } ]; vardb; varrequest=indexedDB.open( newDatabase ,1); request.onerror=function(e){ console.log( error: ,e); }; request.onsuccess=function(e){ db=request.result; console.log( success: +db); }; request.onupgradeneeded=function(event){ } request.onupgradeneeded=function(event){ varobjectStore=event.target.result.createObjectStore( users ,{keyPath: id }); for(variinuserData){ objectStore.add(userData[i]); } } functionAdd(){ varrequest=db.transaction([ users ], readwrite ) .objectStore( users ) .add({id: 3 ,name: Gautam ,age:30,email: gautam@store.org }); request.onsuccess=function(e){ alert( Gautamhasbeenaddedtothedatabase. }; request.onerror=function(e){ alert( Unabletoaddtheinformation. } } functionRead(){ varobjectStore=db.transaction( users ).objectStore( users varrequest=objectStore.get( 2 request.onerror=function(event){ alert( Unabletoretrievedatafromdatabase! }; request.onsuccess=function(event){ if(request.result){ alert( Name: +request.result.name+ ,Age: +request.result.age+ ,Email: +request.result.email); }else{ alert( Bidulatacouldn'tbefoundinyourdatabase! } }; } functionReadAll(){ varobjectStore=db.transaction( users ).objectStore( users varreq=objectStore.openCursor(); req.onsuccess=function(event){ db.close(); varres=event.target.result; if(res){ alert( Key +res.key+ is +res.value.name+ ,Age: +res.value.age+ ,Email: +res.value.email); res.continue(); } }; req.onerror=function(e){ console.log( ErrorGetting: ,e); }; } functionRemove(){ varrequest=db.transaction([ users ], readwrite ).objectStore( users ).delete( 1 request.onsuccess=function(event){ alert( Tapas'sentryhasbeenremovedfromyourdatabase. }; } /script /head body buttononclick= Add() Addrecord /button buttononclick= Remove() Deleterecord /button buttononclick= Read() Retrievesinglerecord /button buttononclick= ReadAll() Retrieveallrecords /button /body /html
鎖localStorage是不帶lock功能的。那么要實現前端的數據共享并且需要lock功能那就需要使用其它本儲存方式，比如indexedDB。indededDB使用的是事務處理的機制，那實際上就是lock功能。
做這個測試需要先簡單的封裝下indexedDB的操作，因為indexedDB的連接比較麻煩，而且兩個測試頁面都需要用到
JavaScript Code復制內容到剪貼板
IDBDatabase.prototype.doTransaction=function(f){ f(this.transaction([ Obj ], readwrite ).objectStore( Obj )); }; //連接數據庫，成功后調用main函數 (function(){ //打開數據庫 varcn=indexedDB.open( TestDB ,1); //創建數據對象 cn.onupgradeneeded=function(e){ e.target.result.createObjectStore( Obj }; //數據庫連接成功 cn.onsuccess=function(e){ main(e.target.result); }; })(); 接著是兩個測試頁面 scriptsrc= db.js /script script //a.html functionmain(e){ (functioncallee(){ //開始一個事務 e.doTransaction(function(e){ e.put(1, test //設置test的值為1 e.put(2, test //設置test的值為2 }); setTimeout(callee); })(); }; /script scriptsrc= db.js /script script //b.html functionmain(e){ (functioncallee(){ //開始一個事務 e.doTransaction(function(e){ //獲取test的值 e.get( test ).onsuccess=function(e){ console.log(e.target.result); }; }); setTimeout(callee); })(); }; /script
測試的時候b.html中可能不會立即有輸出，因為indexedDB正忙著處理a.html東西，b.html事務丟在了事務丟隊列中等待。但是無論如何，輸出結果也不會是1這個值。因為indexedDB的最小處理單位是事務，而不是localStorage那樣以表達式為單位。這樣只要把lock和unlock之間需要處理的東西放入一個事務中即可實現。另外，瀏覽器對indexedDB的支持不如localStorage，所以使用時還得考慮瀏覽器兼容。
html教程

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

上一篇：基于HTML實現表單提交后不刷新頁面

下一篇：html5制作轉盤游戲