HTML5本地儲存indexDB新建資料庫、資料庫增刪改查操作

阿新 • • 發佈：2019-02-04

var content = null; // 本演示使用的資料庫名稱 var dbName = 'project'; // 版本 var version = 1; // 資料庫資料結果 var db; // 開啟資料庫 var DBOpenRequest = window.indexedDB.open(dbName, version); // 如果資料庫開啟失敗 DBOpenRequest.onerror = function(event) { logError('資料庫開啟失敗'); }; DBOpenRequest.onsuccess = function

(event) { // 儲存資料結果 db = DBOpenRequest.result; }; // 下面事情執行於：資料庫首次建立版本，或者window.indexedDB.open傳遞的新版本（版本數值要比現在的高） DBOpenRequest.onupgradeneeded = function(event) { db = event.target.result; db.onerror = function(event) { logError('資料庫開啟失敗'

); }; // 建立一個數據庫儲存物件 var objectStore = db.createObjectStore(dbName, { keyPath: 'id', autoIncrement: true }); // 定義儲存物件的資料項 objectStore.createIndex('id', 'id', { unique: true }); objectStore.createIndex('name'

, 'name'); objectStore.createIndex('begin', 'begin'); objectStore.createIndex('end', 'end'); objectStore.createIndex('person', 'person'); objectStore.createIndex('remark', 'remark'); }; var method = { // 新增資料 add: function (newItem) { var transaction = db.transaction([dbName], "readwrite"); // 開啟已經儲存的資料物件 var objectStore = transaction.objectStore(dbName); // 新增到資料物件中 var objectStoreRequest = objectStore.add(newItem); objectStoreRequest.onsuccess = function(event) { alert('新增成功！'); }; }, // 更新資料 update: function (id, data) { // 編輯資料 var transaction = db.transaction([dbName], "readwrite"); // 開啟已經儲存的資料物件 var objectStore = transaction.objectStore(dbName); // 獲取儲存的對應鍵的儲存物件 var objectStoreRequest = objectStore.get(id); // 獲取成功後替換當前資料 objectStoreRequest.onsuccess = function(event) { // 當前資料 var myRecord = objectStoreRequest.result; // 遍歷替換 for (var key in data) { if (typeof myRecord[key] != 'undefined') { myRecord[key] = data[key]; } } // 更新資料庫儲存資料 objectStore.put(myRecord); }; }, // 刪除資料 del: function (id) { // 開啟已經儲存的資料物件 var objectStore = db.transaction([dbName], "readwrite").objectStore(dbName); // 直接刪除 var objectStoreRequest = objectStore.delete(id); // 刪除成功後 }, // 通過主鍵key單個記錄資料,主鍵是前面開始設定的相應key值 get: function (key) { var transaction = db.transaction([dbName], "readwrite"); var store = transaction.objectStore(dbName); var request = store.get(key); request.onerror = function(){ console.error('getDataByKey error'); }; request.onsuccess = function(e){ var result = e.target.result; console.log('查詢資料成功') console.log(result); }; }, // 遍歷資料表 cursor: function () { var transaction = db.transaction([dbName], "readwrite"); var store = transaction.objectStore(dbName); var request = store.openCursor();//開啟遊標 var arr = []; request.onsuccess = function(e) { var cursor = e.target.result; if (cursor) { console.log(cursor); arr.push(cursor.value); cursor.continue(); } content = JSON.stringify(arr); }; } }; let count = 0; // 新增 document.querySelectorAll('button')[0].onclick = function () { // method.cursor(); method.add({name: 'zyc' + count++, begin: '2012-12-22', end: '2122-32-44', person: 'dada', remark: 'dada'}); method.cursor(); // 遍歷所有資料庫表project的記錄，並輸出到div裡面 document.querySelector("#content1").innerHTML = content; } // 修改 document.querySelectorAll('button')[1].onclick = function () { method.update(3, {name: '我是更改的值id=3', begin: '2012-12-22', end: '2122-32-44', person: 'dada', remark: 'dada'}); method.cursor(); // 遍歷所有資料庫表project的記錄，並輸出到div裡面 document.querySelector("#content2").innerHTML = content; } // 刪除 document.querySelectorAll('button')[2].onclick = function () { method.del(2); // 刪除主鍵key id = 2的值 method.cursor(); // 遍歷所有資料庫表project的記錄，並輸出到div裡面 document.querySelector("#content3").innerHTML = content; } // 遍歷 document.querySelectorAll('button')[3].onclick = function () { method.cursor(); // 遍歷所有資料庫表project的記錄，並輸出到div裡面 document.querySelector("#content4").innerHTML = content; }

HTML5本地儲存indexDB新建資料庫、資料庫增刪改查操作

HTML5本地儲存indexDB新建資料庫、資料庫增刪改查操作

Linux資料庫管理——day1——安裝MySQL、基本增刪改查操作

【Mac系統 + Python + Django】之開發一個釋出會系統【Django模型（二）】【Mac系統 + Mysql】之安裝Mysql資料庫【Python + Mysql】之用pymysql庫連線Mysql資料庫並進行增刪改查操作

爬蟲使用mysql建立新資料庫並進行增刪改查操作

php使用面對物件思想實現資料庫簡單的增刪改查操作

Python3使用mysql建立新資料庫並進行增刪改查操作

Oracle資料庫常見的增刪改查操作語句大全

使用sql標籤來實現對資料庫當中記錄增刪改查操作

Larave5.*框架資料庫的CURD增刪改查操作教程

利用反射實現對sqlite3資料庫的crud(增刪改查)操作的一個baseAndroidDao封裝,安卓開發中

nodejs-第四天-使用MongoDB、shell增刪改查操作、聚集集合操作

例項：建立一個表格，分頁顯示資料（MongoDB資料庫儲存），功能：實現增刪改查

MongoDB 資料庫建立刪除、表（集合）建立刪除、資料增刪改查

MongoDB 資料庫建立刪除、表（集合）建立刪除、資料增刪改查

用python3對資料庫mysql進行建立庫、表、增刪改查操作

ionic2本地資料庫SQLite的增刪改查

mysql資料庫的簡單增刪改查，合併欄位，拼接字元操作，用java完成將一張表中的查詢結果合併存入另一張表的指定欄位

python連線MongoDB資料庫方法及增刪改查等操作小結。

ThinkPHP資料庫原生SQL增刪改查

1112_Springboot+Mybaits+Mysql資料庫增刪改查操作——上路

HTML5本地儲存indexDB新建資料庫、資料庫增刪改查操作

相關推薦