IndexDB的基本操作
时间：2021-07-01 10:21:17
帮助过：7人阅读
<!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>
IndexDB的基本操作
标签：win tor back target city amp option current 数据
