indexedDB是存儲大量結構化數據的API,demo中用到的是異步API,麻煩的就是所有對indexedDB的操作都會發生一個異步的‘請求’,只要熟悉了API操作起來也很簡單。
大體流程是這樣
1.打開數據庫
JavaScript Code復制內容到剪貼板
- var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;
- if ('webkitIndexedDB' in window) {
- window.IDBTransaction = window.webkitIDBTransaction;
- window.IDBKeyRange = window.webkitIDBKeyRange;
- }
- //這個就不解釋了
- var request = indexedDB.open("adsageIDB"); //open : indexedDB只有這一個方法 打開(數據庫名)
- request.onsuccess = function(e) { //異步
- var v = "1.00";
- var db = e.target.result;
- if (v!= db.version) {
- var setVrequest = db.setVersion(v);
- setVrequest.onsuccess = function(e) { //異步
- if(db.objectStoreNames.contains("todo")) {
- db.deleteObjectStore("todo");
- }
- var store = db.createObjectStore("todo", {keyPath: "adsid"});//onsuccess 后創建ObjectStore 暫時用到兩個參數,數據庫&&主鍵
- }
- }
- }
這樣就 創建/連接 了一個數據庫
2.創建交互對象 && 監聽dom事件 && 處理數據
然后就是要操作數據庫了
JavaScript Code復制內容到剪貼板
- //插入數據 暫時只插入一列
- var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);//創建transaction
- var store = trans.objectStore("todo");//創建Store
- //要操作數據必須建立transaction 和 Store
- var data = {
- "text": todoText,
- "adsid": new Date().getTime()
- };//一個小數據 adsid是主鍵
- var request = store.put(data); //‘強行’插入
- request.onsuccess = function(e) {
- //成功后執行一些操作
- };
- request.onerror = function(e) {
- console.log("Error Adding: ", e);
- };
JavaScript Code復制內容到剪貼板
- //讀取數據
- var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE);
- var store = trans.objectStore("todo");
- var keyRange = IDBKeyRange.lowerBound(0);
- var cursorRequest = store.openCursor(keyRange);
- //這里用到指針cursor ,openCursor的參數 keyRange是遍歷范圍 還可以添加遍歷方向參數
- //另一種方法是get() 這個就比較簡單了直接store.get('鍵值')就行
- cursorRequest.onsuccess = function(e) {
- var result = e.target.result;
- if(!!result == false)
- return;
- console.log(result.value);
- result.continue(); //循環讀取所有數據
- };
JavaScript Code復制內容到剪貼板
- //刪除數據
- ...
- store.delete('鍵值')
- ...
【網站聲明】本站除付費源碼經過測試外,其他素材未做測試,不保證完整性,網站上部分源碼僅限學習交流,請勿用于商業用途。如損害你的權益請聯系客服QQ:2655101040 給予處理,謝謝支持。