HTML5中的IndexedDatabase
Indexed Database一種在瀏覽器中通過JavaScript操作的功能的資料庫,為同一個源執行的程式共享空間,在同一個源擁有的空間中可以建立多個資料庫,而在1個資料庫中又可以建立多個物件儲存。 物件儲存類似於mongDB中的資料集合。
連線資料庫:
var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB; var db = null; //連線資料庫 var request = indexedDB.open(`testdb`); //連線資料庫成功 request.onsuccess = function(event) { //使用全域性變數引用資料庫 db =event.target.result; }; //連線資料庫失敗 request.onerror = function(event) { alert(`連線資料庫失敗`); };
建立物件儲存:
通過呼叫createObjectStore方法建立,該方法只能在資料庫的版本更改事務中執行,setVersion方法後會自動開啟該事務。
//更改DB版本 var request = db.setVersion(`1.0`); request.onsuccess= function(event) { //建立物件儲存 var store = db.createObjectStore(`books`,{ keyPath: `_id`, autoIncrement:true }); }
資料的新增、刪除、引用
//獲得事務物件 var IDBTransaction = window.IDBTransaction || window.webkitIdbTransaction; //新增資料函式 function addData(data){ var transaction = db.transaction([`books`],IDBTransaction.READ_WRITE); //新增資料,也可使用put var request = transaction.objectStore(`books`).add(data); request.onsuccess = function(event) { //若成功,返回鍵 var key = event.target.result; console.log(`success! key-> `,key); }; } //資料引用 function getData(key) { //事務的開始 var transaction = db.transaction([`books`]); //資料的引用 var request = transaction.objectStore(`books`).get(key); request.onsuccess = function(event) { var data= event.target.result; console.log(`success data->`,data); }; } //資料的刪除 function delData(key){ //事務的開始 var transaction = db.transaction([`books`],IDBtransaction.READ_WRITE); var request=transaction.objectStore(`books`).delete(key); request.onsuccess=function(event) { console.log(`delete success`); }; }
索引的建立:只能在資料庫版本更改事務中進行索引的建立
var request =db.setVersion(`1.1`); request.onsuccess=function(event) { var transaction = event.target.result; var store=transaction.objectStore(`books`); //建立索引 var index=store.createIndex(`index_name`,`column_name`); };
使用索引檢索資料
var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction; var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange; //事務和物件儲存 var transation=db.transaction([`books`],IDBTransaction.READ_WRITE); var store=transaction.objectStore(`books`); //建立指定範圍物件10~100 var range=IDBKeyRange.bound(`10`,`100`); //通過索引檢索資料 var request=store.index(`index_name`).openCursor(range); request.onsuccess=function(event) { //獲取IDBCursor物件 var cursor=event.target.result; //若資料存在 if(cursor){ var data =cursor.value; //更新資料 data.name=`hh`; cursor.update(data); //cursor.delete刪除該資料 //檢索下一條 cursor.continue(); } };
事務的回滾
var request =index.openCursor(keyRange); request.onsuccess=function(event) { var cursor=event.target.result; if(cursor) { //若有readonly標誌 if(cursor.value.readonly){ var transaction =event.target.transaction; //回滾 transaction.abort(); }else { cursor.delete(); cursor.continue(); } } };
相關文章
- HTML5中的表單HTML
- HTML5中的localStorage用法HTML
- HTML5中的Range物件的研究HTML物件
- HTML5中的execCommand命令HTML
- html5中的GPS定位功能HTML
- 聊聊HTML5中的Web Notification桌面通知HTMLWeb
- HTML5中audio標籤的使用HTML
- html5中article元素的使用方法HTML
- html5中section元素的使用方法HTML
- html5中nav元素的使用方法HTML
- html5中的canvas線性漸變HTMLCanvas
- 理解HTML5中Range物件HTML物件
- HTML5中margin使用技巧HTML
- html5中的canvas繪製橢圓的方法HTMLCanvas
- 淺談HTML5中canvas中的beginPath()和closePath()的重要性HTMLCanvas
- HTML5啟動手機中的APP(IOS)HTMLAPPiOS
- HTML5中meta屬性的使用詳解HTML
- 崛起中的九大HTML5開發工具HTML
- HTML5視訊教程,HTML5專案實戰,HTML5中文指南,HTML5使用手冊HTML
- html5中canvas繪製矩形HTMLCanvas
- HTML5中快取技術HTML快取
- HTML5中的網路儲存實現方式HTML
- HTML5中關於標籤的那些事兒HTML
- HTML5 中 40 個最重要的技術點HTML
- HTML5在移動開發中的現狀HTML移動開發
- HTML5是Web中核心語言HTMLWeb
- HTML5中dialog元素嚐鮮HTML
- HTML5中常用表單整理HTML
- HTML5中margin屬性應用HTML
- html5中canvas繪製圓形HTMLCanvas
- html5中canvas繪製線段HTMLCanvas
- HTML5遊戲開發過程中的二三事HTML遊戲開發
- 前端知識科普:HTML5中重要的6個點!前端HTML
- HTML5中CSS3的屬性選擇器HTMLCSSS3
- HTML5和CSS3中的互動新特性HTMLCSSS3
- HTML5中與頁面顯示相關的APIHTMLAPI
- HTML5:Web遊戲中的GUI設計和互動HTMLWeb遊戲GUI
- 掌握HTML5中的多媒體–視訊(video)HTMLIDE