IndexDB的基本操作
1.前端存储的一个数据库。
2.介绍一下基本操作。
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 </head> 8 9 <body> 10 <input type="text" id="input" / placeholder="请输入内容"> 11 <button id="submit">写入</button> 12 <div id="result"></div> 13 <script src="./jquery-2.2.1.min.js"></script> 14 <script> 15 (function($) { 16 jQuery.extend({ 17 "addData": function(options) { 18 var opts = $.extend(true, defaults, options); 19 console.log(opts); 20 var openRequest = indexedDB.open(opts.dbName); 21 openRequest.onerror = function(e) { 22 console.log("Database error: " + e.target.errorCode); 23 }; 24 openRequest.onsuccess = function(event) { 25 var db = openRequest.result; 26 // 新增数据 27 var transaction = db.transaction(opts.tableName, "readwrite"); 28 var store = transaction.objectStore(opts.tableName); 29 if (db != null && db != null) { 30 var request = store.add(opts.data); 31 request.onsuccess = function(e) { 32 result.innerHTML = "Employee record was added successfully."; 33 }; 34 request.onerror = function(e) { 35 console.log(e.target.error.message); 36 result.innerHTML = "Employee record was not added."; 37 }; 38 } 39 }; 40 openRequest.onupgradeneeded = function(evt) { 41 var employeeStore = event.currentTarget.result.createObjectStore(opts.tableName, { 42 keyPath: opts.keypath 43 }); 44 } 45 }, 46 "deleteData": function(options) { 47 }, 48 "deleteDB": function(options) { 49 var opts = $.extend(true, defaults, options); 50 var deleteDbRequest = indexedDB.deleteDatabase(opts.dbName); 51 deleteDbRequest.onsuccess = function(event) { 52 // database deleted successfully 53 console.log("Deleted " + options); 54 }; 55 deleteDbRequest.onerror = function(e) { 56 console.log("Database error: " + e.target.errorCode); 57 }; 58 }, 59 "resetData": function(options) { 60 var openRequest = indexedDB.open(options); 61 openRequest.onsuccess = function(event) { 62 app.db = openRequest.result; 63 var result = document.getElementById("result"); 64 result.innerHTML = ""; 65 if (app != null && app.db != null) { 66 console.log("123", app.db) 67 var store = app.db.transaction("employees", "readwrite").objectStore("employees"); 68 store.get("E1").onsuccess = function(event) { 69 var employee = event.target.result; 70 if (employee == null) { 71 result.value = "employee not found"; 72 } else { 73 var jsonStr = JSON.stringify(employee); 74 employee.city = "nanjing"; 75 console.log(employee); 76 store.put(employee).onsuccess = function(event) { 77 console.log("修改成功！"); 78 store.get("E1").onsuccess = function(event) { 79 var employee = event.target.result; 80 result.innerHTML = JSON.stringify(employee); 81 } 82 } 83 } 84 }; 85 } 86 }; 87 openRequest.onerror = function(event) { 88 console.log(event) 89 } 90 }, 91 "getData": function(options){ 92 var openRequest = indexedDB.open(options.dbName); 93 openRequest.onsuccess = function(event) { 94 app.db = openRequest.result; 95 var result = document.getElementById("result"); 96 result.innerHTML = ""; 97 if (app != null && app.db != null) { 98 var store = app.db.transaction("employees").objectStore("employees"); 99 store.get(options.index).onsuccess = function(event) { 100 var employee = event.target.result; 101 if (employee == null) { 102 result.value = "employee not found"; 103 } else { 104 var jsonStr = JSON.stringify(employee); 105 result.innerHTML = jsonStr; 106 } 107 }; 108 } 109 }; 110 openRequest.onerror = function(event) { 111 console.log(event) 112 } 113 }, 114 }); 115 //默认参数 116 var defaults = { 117 dbName: "DataBase", 118 tableName: "table", 119 keypath: "id" 120 } 121 var app = { 122 "db": {} 123 }; 124 })(window.jQuery); 125 // $.deleteDB("DataBase"); 126 $.addData({"data":{"id":"E2","name":"zhangsan","age":24}}); 127 // $.deleteDB("AAA"); 128 // $.getData({"dbName":"AAA","index":"E9"}); 129 // $.resetData("AAA"); 130 </script> 131 </body> 132 133 </html>
