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中的Web Notification桌面通知HTMLWeb
- HTML5視訊教程,HTML5專案實戰,HTML5中文指南,HTML5使用手冊HTML
- 淺談HTML5中canvas中的beginPath()和closePath()的重要性HTMLCanvas
- HTML5中 drag 和 drop apiHTMLAPI
- HTML5中dialog元素嚐鮮HTML
- HTML5中的網路儲存實現方式HTML
- HTML5是Web中核心語言HTMLWeb
- HTML5遊戲開發過程中的二三事HTML遊戲開發
- 前端知識科普:HTML5中重要的6個點!前端HTML
- HTML5中新新增的表單屬性有哪些?HTML
- Twaver HTML5中的 CloudEditor 進行Angular2 重寫HTMLCloudAngular
- HTML5中的aria與role,WAI-ARIA無障礙HTMLAI
- HTML5中Audio使用踩坑彙總HTML
- HTML5的崛起之路!HTML
- HTML5新增的APIHTMLAPI
- HTML5中有序列表和無序列表的寫法HTML
- NodeJS Express 中建立html5的server-sent event服務端NodeJSExpressHTMLServer服務端
- 好程式設計師帶你認識HTML5中的WebSocket程式設計師HTMLWeb
- HTML5中form表單功能介紹分享HTMLORM
- html5中canvas元素建立畫布介紹HTMLCanvas
- 基於 HTML5 WebGL 的 3D 場景中的燈光效果HTMLWeb3D
- HTML5開發學習教程,學習HTML5還是學習HTML5的製作工具?HTML
- 學習HTML5還是學習HTML5的製作工具?HTML
- 好程式設計師前端教程之HTML5中的storage 如何使用?程式設計師前端HTML
- HTML5中手勢原理分析與數學知識的實踐HTML
- Html5 canvas中width、height和style的寬高區別詳解HTMLCanvas
- HTML5HTML
- HTML5基礎入門之常見的HTML5框架有哪些?HTML框架
- HTML5培訓:什麼是HTML5?HTML
- HTML5的SVG和Canvas的使用HTMLSVGCanvas
- 你有用過HTML5中的datalist標籤嗎?說說你對它的理解HTML
- HTML5進階FileReader的使用HTML
- RIA的未來是HTML5?HTML
- HTML5的新特性概述(上)HTML
- 讓你聽見的 HTML5HTML
- HTML5前景如何?HTML5好找工作嗎?HTML
- HTML5如何學?HTML5該學什麼?HTML
- 如何在HTML5頁面中嵌入音訊和影片?HTML音訊