经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » HTMLCSS » CSS » 查看文章
IndexedDB 简单封装
来源:cnblogs  作者:huangenai  时间:2018/10/11 9:06:29  对本文有异议

IndexedDB 浏览器数据库,是一个非关系型数据库,数据形式使用的是json,IndexedDB适合存储大量数据,它的API是异步调用的,当然他的api 也相对复杂。

当然浏览器数据存储 还有LocalStorage,Cookies,web SQL等 为什么还再来一个indexedDB。

之前我在开发过程中使用的是web sql,可以直接写sql查询数据。

LocalStorage,用key-value键值模式存储数据,而且Localstorage就是专门为小数量数据设计的。

Cookies只能是字符串 而且空间有限。

如果你在实际应用中希望存储大量数据时,IndexedDB会明显的更适合,IndexedDB也能提供你更为复杂的查询数据的方式,还能建立索引,他的索引还是挺666的。

下面是自己看了阮一峰的 文章 http://www.ruanyifeng.com/blog/2018/07/indexeddb.html

简单的学习了下 IndexedDB 对这个浏览器数据库有个大概的了解,下面是个人对IndexedDB 简单的封装。

 

  1. const dbName = "test";
  2. const dbVersion = 1;
  3. export default {
  4. // indexedDB兼容
  5. indexedDB:
  6. window.indexedDB ||
  7. window.webkitindexedDB ||
  8. window.msIndexedDB ||
  9. window.mozIndexedDB,
  10. //name:表名 key:主键 ,cursorIndex 索引
  11. store: {
  12. teacher: {
  13. name: "teacher",
  14. key: "id",
  15. cursorIndex: [{ name: "teachNum", unique: false }]
  16. },
  17. student: {
  18. name: "student",
  19. key: "id",
  20. cursorIndex: [{ name: "stuNum", unique: false }]
  21. }
  22. },
  23. async initDB() {
  24. let that = this;
  25. let request = this.indexedDB.open(dbName, dbVersion);
  26. request.onerror = function() {
  27. console.log("打开数据库失败");
  28. };
  29. request.onsuccess = function() {
  30. console.log("打开数据库成功");
  31. };
  32. request.onupgradeneeded = function(event) {
  33. let db = event.target.result;
  34. for (var t in that.store) {
  35. if (!db.objectStoreNames.contains(that.store[t].name)) {
  36. var objectStore = db.createObjectStore(that.store[t].name, {
  37. keyPath: that.store[t].key,
  38. autoIncrement: true
  39. });
  40. for (let i = 0; i < that.store[t].cursorIndex.length; i++) {
  41. const element = that.store[t].cursorIndex[i];
  42. objectStore.createIndex(element.name, element.name, {
  43. unique: element.unique
  44. });
  45. }
  46. }
  47. }
  48. };
  49. },
  50. // 打开数据库
  51. openDB: function() {
  52. return new Promise((resolve, reject) => {
  53. let request = this.indexedDB.open(dbName, dbVersion);
  54. request.onerror = function(event) {
  55. reject("IndexedDB数据库打开错误," + event);
  56. };
  57. request.onsuccess = function(event) {
  58. resolve(event.target.result);
  59. };
  60. });
  61. },
  62. // 删除表
  63. deleteDB: function(table) {
  64. let deleteQuest = this.indexedDB.deleteDatabase(table);
  65. deleteQuest.onerror = function() {
  66. return Promise.resolve(false);
  67. };
  68. deleteQuest.onsuccess = function() {
  69. return Promise.resolve(true);
  70. };
  71. },
  72. // 关闭数据库
  73. closeDB: async function(db) {
  74. try {
  75. let d;
  76. if (!db) {
  77. d = await this.openDB();
  78. }
  79. let closeQuest = d.closeDB();
  80. return new Promise(resolve => {
  81. closeQuest.onerror = function() {
  82. resolve(false);
  83. };
  84. closeQuest.onsuccess = function() {
  85. resolve(true);
  86. };
  87. });
  88. } catch (error) {
  89. return Promise.resolve(false);
  90. }
  91. },
  92. // 添加数据,add添加新值
  93. insert: async function(table, data) {
  94. try {
  95. let db = await this.openDB();
  96. let request = db
  97. .transaction(table.name, "readwrite")
  98. .objectStore(table.name)
  99. .add(data);
  100. return new Promise((resolve, reject) => {
  101. request.onerror = function() {
  102. reject("添加数据出错");
  103. };
  104. request.onsuccess = function() {
  105. resolve(true);
  106. };
  107. });
  108. } catch (error) {
  109. console.log(error);
  110. return Promise.resolve(false);
  111. }
  112. },
  113. // 更新
  114. update: async function(table, data) {
  115. try {
  116. let db = await this.openDB();
  117. let request = db
  118. .transaction(table.name, "readwrite")
  119. .objectStore(table.name)
  120. .put(data);
  121. return new Promise(resolve => {
  122. request.onerror = function() {
  123. resolve(false);
  124. };
  125. request.onsuccess = function() {
  126. resolve(true);
  127. };
  128. });
  129. } catch (error) {
  130. return Promise.resolve(false);
  131. }
  132. },
  133. // 删除数据
  134. delete: async function(table, keyValue) {
  135. try {
  136. let db = await this.openDB();
  137. let request = db
  138. .transaction(table.name, "readwrite")
  139. .objectStore(table.name)
  140. .delete(keyValue);
  141. return new Promise(resolve => {
  142. request.onerror = function() {
  143. resolve(false);
  144. };
  145. request.onsuccess = function() {
  146. resolve(true);
  147. };
  148. });
  149. } catch (error) {
  150. return Promise.resolve(false);
  151. }
  152. },
  153. // 清空数据
  154. clear: async function(table) {
  155. let db = await this.openDB();
  156. let store = db.transaction(table.name, "readwrite").objectStore(table.name);
  157. store.clear();
  158. },
  159. // 查询数据 表名 索引值 索引 key 没有value key为key 而不是索引
  160. get: async function(table, keyValue, indexCursor) {
  161. try {
  162. let db = await this.openDB();
  163. let store = db
  164. .transaction(table.name, "readonly")
  165. .objectStore(table.name);
  166. let request;
  167. request = !keyValue
  168. ? store.openCursor()
  169. : indexCursor
  170. ? store.index(indexCursor).get(keyValue)
  171. : store.get(keyValue);
  172. let data = [];
  173. return new Promise(resolve => {
  174. request.onerror = function() {
  175. resolve("查询数据失败");
  176. };
  177. request.onsuccess = function(event) {
  178. if (!keyValue && !indexCursor) {
  179. if (event.target.result) {
  180. data.push(event.target.result.value);
  181. event.target.result.continue();
  182. } else {
  183. resolve(data);
  184. }
  185. } else {
  186. resolve([event.target.result]);
  187. }
  188. };
  189. });
  190. } catch (error) {
  191. return Promise.reject(error);
  192. }
  193. },
  194. // 通过游标操作数据, callback中要有游标移动方式
  195. handleDataByCursor: async function(table, keyRange) {
  196. try {
  197. let kRange = keyRange || "";
  198. let db = await this.openDB();
  199. let store = db.transaction(table, "readwrite").objectStore(table),
  200. request;
  201. request = store.openCursor(kRange);
  202. return new Promise(resolve => {
  203. request.onerror = function() {
  204. resolve("通过游标获取数据报错");
  205. };
  206. request.onsuccess = function(event) {
  207. let cursor = event.target.result;
  208. resolve(cursor);
  209. };
  210. });
  211. } catch (error) {
  212. return Promise.reject(error);
  213. }
  214. },
  215. // 通过索引游标操作数据, callback中要有游标移动方式
  216. handleDataByIndex: async function(table, keyRange, sursorIndex) {
  217. try {
  218. let kRange = keyRange || "";
  219. let db = await this.openDB();
  220. let store = db.transaction(table, "readwrite").objectStore(table),
  221. request;
  222. request = store.index(sursorIndex).openCursor(kRange);
  223. return new Promise(resolve => {
  224. request.onerror = function() {
  225. resolve("通过索引游标获取数据报错");
  226. };
  227. request.onsuccess = function(event) {
  228. let cursor = event.target.result;
  229. if (cursor) {
  230. resolve(cursor);
  231. }
  232. };
  233. });
  234. } catch (error) {
  235. return Promise.reject(error);
  236. }
  237. },
  238. // 创建游标索引
  239. createCursorIndex: async function(table, cursorIndex, unique) {
  240. var db = await this.openDB();
  241. let store = db.transaction(table, "readwrite").objectStore(table);
  242. store.createIndex(cursorIndex, cursorIndex, {
  243. unique: unique
  244. });
  245. return Promise.resolve();
  246. }
  247. };

 


此随笔乃本人学习工作记录,如有疑问欢迎在下面评论,转载请标明出处。

如果对您有帮助请动动鼠标右下方给我来个赞,您的支持是我最大的动力。

 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号