前言
近日，接觸到了IndexedDB，看了下網友的答案，我不大滿意，所以在此總結下基本使用。
代碼
1 <html>
2 <head>
3 <meta charset="utf-8"></meta>
4 <title>IndexedDb測試</title>
5 <script src="./index.js"></script>
6 </head>
7 <body>
8 </body>
9 </html>
index.js如下：
1 const DATABASE_NAME = "test_db"; 2 const VERSION = 1; 3 const TABLE = "test_table"; 4
5 /** 6 * 在 [db]--[tableName]中新增一條記錄[data] 7 */
8 function addRecord(db, tableName, data) { 9 return new Promise(function(resolve, reject) { 10 let request = db.transaction(tableName, "readwrite") 11 .objectStore(tableName) 12 .add(data); 13 request.onsuccess = function () { 14 resolve({ 15 code: 10000
16 }); 17 } 18 request.onerror = function (e) { 19 reject({ 20 code: 0, 21 msg: e.target.error 22 }) 23 } 24 }) 25 } 26
27 /** 28 * 獲取 [db]--[tableName]下，主鍵為 [key] 的某條記錄 29 */
30 function getRecord(db, tableName, key) { 31 return new Promise(function(resolve, reject) { 32 let request = db.transaction(tableName) 33 .objectStore(tableName) 34 .get(key); 35 request.onsuccess = function (e) { 36 resolve({ 37 code: 10000, 38 data: e.target.result 39 }); 40 } 41 request.onerror = function (e) { 42 reject({ 43 code: 0, 44 msg: e.target.error 45 }) 46 } 47 }) 48 } 49
50 /** 51 * 根據索引所在位置 [_index]，獲取 [db]--[tableName]下，索引值為 [identify]的某條記錄 52 */
53 function getRecordWithIndex(db, tableName, _index, identify) { 54 return new Promise(function(resolve, reject) { 55 let request = db.transaction(tableName, "readwrite") 56 .objectStore(tableName) 57 .index(_index) 58 .get(identify); 59 request.onsuccess = function (e) { 60 resolve({ 61 code: 10000, 62 data: e.target.result 63 }); 64 } 65 request.onerror = function (e) { 66 reject({ 67 code: 0, 68 msg: e.target.error 69 }) 70 } 71 }) 72 } 73
74 /** 75 * 讀取 [db]--[tableName] 下的所有記錄 76 */
77 function readAllRecord(db, tableName) { 78 return new Promise(function(resolve, reject) { 79 let objectStore = db.transaction(tableName).objectStore(tableName); 80 let records = []; 81 objectStore.openCursor().onsuccess = function(e) { 82 let cursor = e.target.result; 83 if (cursor) { 84 records.push(cursor.value); 85 cursor.continue(); 86 } else { 87 resolve({ 88 code: 10000, 89 data: records 90 }) 91 } 92 } 93 objectStore.openCursor().onerror = function(e) { 94 reject({ 95 code: 0, 96 msg: e.target.error 97 }) 98 } 99 }) 100 } 101
102 /** 103 * 將 [db]--[tableName]中，主鍵為 [key]的數據為，更新為 [data] 104 */
105 function updateRecord(db, tableName, data, key) { 106 return new Promise(function(resolve, reject) { 107 let request = db.transaction(tableName, "readwrite") 108 .objectStore(tableName) 109 .put(data, key); 110 request.onsuccess = function() { 111 resolve({ 112 code: 10000
113 }) 114 } 115 request.onerror = function (e) { 116 reject({ 117 code: 0, 118 msg: e.target.error 119 }) 120 } 121 }) 122 } 123
124 /** 125 * 在 [db]--[tableName]下，刪除主鍵為[key]的記錄 126 */
127 function deleteRecord(db, tableName, key) { 128 return new Promise(function(resolve, reject) { 129 let request = db.transaction(tableName, "readwrite") 130 .objectStore(tableName) 131 .delete(key); 132 request.onsuccess = function () { 133 resolve({ 134 code: 10000
135 }); 136 } 137 request.onerror = function (e) { 138 reject({ 139 code: 0, 140 msg: e.target.error 141 }) 142 } 143 }) 144 } 145
146 /** 147 * 獲取數據庫對象 148 */
149 function getDB(dbName, version) { 150 return new Promise(function(resolve, reject) { 151 let request = window.indexedDB.open(dbName, version); 152 request.onsuccess = function(e) { 153 let db = e.target.result; 154 resolve(db); 155 } 156 request.onupgradeneeded = function(e) { 157 // 初始化數據庫
158 let db = e.target.result; 159 if (!db.objectStoreNames.contains(TABLE)) { 160 var objectStore = db.createObjectStore(TABLE, {autoIncrement: true}); 161 // 創建索引
162 objectStore.createIndex("name", "name", {unique: true}); 163 objectStore.createIndex("email", "email", {unique: true}); 164 }; 165 } 166 }) 167 } 168
169 getDB(DATABASE_NAME, VERSION).then(db => { 170 let data = { 171 id: 1, 172 name: "張三", 173 age: 18, 174 email: "test@168.com"
175 } 176
177 addRecord(db, TABLE, data).then(res => { 178 console.log(res); 179 }, err => { 180 console.log(err); 181 }) 182
183 // getRecord(db, TABLE, 1).then(res => {
184 // console.log(res);
185 // }, err => {
186 // console.log(err);
187 // })
188
189 // getRecordWithIndex(db, TABLE, "email", "test@168.com").then(res => {
190 // console.log(res);
191 // }, err => {
192 // console.log(err);
193 // })
194
195 // deleteRecord(db, TABLE, 1).then(res => {
196 // console.log(res);
197 // }, err => {
198 // console.log(err);
199 // })
200
201 // readAllRecord(db, TABLE).then(res => {
202 // console.log(res);
203 // }, err => {
204 // console.log(err);
205 // })
206
207 // updateRecord(db, TABLE, {id: 1, name: "小張三", age: 18, email: "new@168.com"}, 1).then(res => {
208 // console.log(res);
209 // }, err => {
210 // console.log(err);
211 // })
212 })
最后
文檔在此：
https://developer.mozilla.org/zh-CN/docs/Web/API/IndexedDB_API
推薦看看阮一峰的這篇文章：