资讯专栏INFORMATION COLUMN

关于indexedDB的使用,以及一个简单的封装

Alliot / 1426人阅读

摘要:因为写起来简洁,所以用写法来作说明接口由提供,异步使用数据库中的事件对象属性。所有的读取和写入数据均在中完成。由发起,通过来设置的模式例如是否只读或读写,以及通过来获得一个。

</>复制代码

  1. //因为ES6写起来简洁,所以用ES6写法来作说明
  2. //IDBTransacation接口由IndexedDB API提供,异步transaction使用数据库中的事件对象属性。所有的读取和写入数据均在transactions中完成。由IDBDatabase发起transaction,通过IDBTransaction 来设置transaction的模式(例如是否只读或读写),以及通过IDBObjectStore来获得一个request。同时你也可以使用它来中止transactions。
  3. let idxDB = {
  4. db: {},
  5. transaction: {},
  6. startTransaction() {
  7. //一个IDBTransacation只能使用一次
  8. //创建transaction有3个要求,一、有connection(数据库连接),二、storeName(读取的store名)、三、mode(包括readonly,readwrite和versionchange)
  9. this.transaction = this.db.transaction("diary", "readwrite");
  10. this.transaction.oncomplete = () => console.log("transaction complete");
  11. this.transaction.onerror = e => console.dir(e);
  12. },
  13. initDB() {
  14. //下面一行代码,以数据库名(danote)和版本号(1)为参数,异步打开一个数据库
  15. let request = indexedDB.open("danote", 1);
  16. request.onerror = e => console.log(e.currentTarget.error.message);
  17. request.onsuccess = e => this.db = e.target.result;
  18. request.onupgradeneeded = e => {
  19. //如果之前数据库不存在,也会运行onupgradeneeded
  20. //新建objectStore
  21. let thisDB = e.target.result;
  22. if (!thisDB.objectStoreNames.contains("diary")) {
  23. let objStore = thisDB.createObjectStore("diary", {
  24. keyPath: "id",
  25. autoIncrement: true
  26. });
  27. //第一个参数是index名称,第二个参数是keyPath
  28. objStore.createIndex("by_create_date", "create_date", {
  29. unique: false
  30. });
  31. }
  32. };
  33. },
  34. closeDB() {
  35. //主动close一个connection(其实没什么意义,在被垃圾回收机制清除或创建上下文被destroy,connection会自动close)
  36. db.close();
  37. },
  38. deleteDB() {
  39. indexedDB.deleteDatabase("danote");
  40. },
  41. addData(data, cb) {
  42. this.startTransaction();
  43. //Object Store是indexedDB的主要储存机制
  44. //IDBTransaction.objectStore()返回你查询的objectStore(IDBObjectStore对象)
  45. let objectStore = this.transaction.objectStore("diary");
  46. let request = objectStore.add(data);
  47. request.onsuccess = () => {
  48. if (cb) cb({
  49. error: 0,
  50. data: data
  51. })
  52. };
  53. request.onerror = () => {
  54. if (cb) cb({
  55. error: 1
  56. })
  57. };
  58. },
  59. clearObjectStore(id, cb) {
  60. this.startTransaction();
  61. let objectStore = this.transaction.objectStore("diary");
  62. let request = objectStore.clear();
  63. request.onsuccess = () => {
  64. if (cb) cb({
  65. error: 0,
  66. data: id
  67. });
  68. };
  69. request.onerror = () => {
  70. if (cb) cb({
  71. error: 1
  72. });
  73. };
  74. },
  75. addmData(mdata, cb) {
  76. this.startTransaction();
  77. let objectStore = this.transaction.objectStore("diary");
  78. for (let c = 0; c < mdata.length; c++) {
  79. let request = objectStore.add(mdata[c]);
  80. request.onerror = () => {
  81. if (cb) cb({
  82. error: 1
  83. })
  84. }
  85. }
  86. },
  87. deleteData(id, cb) {
  88. this.startTransaction();
  89. let objectStore = this.transaction.objectStore("diary");
  90. let request = objectStore.delete(id);
  91. request.onsuccess = () => {
  92. if (cb) cb({
  93. error: 0,
  94. data: id
  95. })
  96. };
  97. request.onerror = () => {
  98. if (cb) cb({
  99. error: 1
  100. })
  101. }
  102. },
  103. getDataById(id, cb) {
  104. this.startTransaction();
  105. let objectStore = this.transaction.objectStore("diary");
  106. let request = objectStore.get(id);
  107. request.onsuccess = () => {
  108. if (cb) cb({
  109. error: 0,
  110. data: e.target.result
  111. })
  112. };
  113. request.onerror = () => {
  114. if (cb) cb({
  115. error: 1
  116. })
  117. }
  118. },
  119. getDataAll(cb) {
  120. this.startTransaction();
  121. let objectStore = this.transaction.objectStore("diary");
  122. let rowData = [];
  123. objectStore.openCursor(IDBKeyRange.lowerBound(0)).onsuccess = (e) => {
  124. let cursor = e.target.result;
  125. if (!cursor && cb) {
  126. cb({
  127. error: 0,
  128. data: rowData
  129. });
  130. return;
  131. }
  132. rowData.unshift(cursor.value);
  133. cursor.continue();
  134. };
  135. },
  136. updateData(id, updateData, cb) {
  137. this.startTransaction();
  138. let objectStore = this.transaction.objectStore("diary");
  139. let request = objectStore.get(id);
  140. request.onsuccess = e => {
  141. let thisDB = e.target.result;
  142. for (key in updateData) {
  143. thisDB[key] = updateData[key];
  144. }
  145. objectStore.put(thisDB);
  146. if (cb) cb({
  147. error: 0,
  148. data: thisDB
  149. })
  150. };
  151. request.onerror = e => {
  152. if (cb) cb({
  153. error: 1
  154. })
  155. }
  156. },
  157. getDataBySearch(keywords, cb) {
  158. this.startTransaction();
  159. let objectStore = this.transaction.objectStore("diary");
  160. let boundKeyRange = IDBKeyRange.only(keywords);
  161. let rowData = [];
  162. objectStore.index("folder").openCursor(boundKeyRange).onsuccess = e => {
  163. let cursor = e.target.result;
  164. if (!cursor) {
  165. if (cb) cb({
  166. error: 0,
  167. data: rowData
  168. })
  169. return;
  170. }
  171. rowData.push(cursor.value);
  172. cursor.continue();
  173. };
  174. },
  175. getDataByPager(start, end, cb) {
  176. this.startTransaction();
  177. let objectStore = transaction.objectStore("diary");
  178. let boundKeyRange = IDBKeyRange.bound(start, end, false, true);
  179. //关于keyRange https://www.w3.org/TR/IndexedDB/#dfn-key-range
  180. let rowData = [];
  181. objectStore.openCursor(boundKeyRange).onsuccess = e => {
  182. let cursor = e.target.result;
  183. if (!cursor && cb) {
  184. cb({
  185. error: 0,
  186. data: rowData
  187. });
  188. return;
  189. }
  190. rowData.push(cursor.value);
  191. cursor.continue();
  192. };
  193. }
  194. }
  195. //objectStore的名称在例子里全都写死了,因为我只建了一个objectStore,使用时建议还是以参数传进函数

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/82494.html

相关文章

  • 关于indexedDB使用以及一个简单封装

    摘要:因为写起来简洁,所以用写法来作说明接口由提供,异步使用数据库中的事件对象属性。所有的读取和写入数据均在中完成。由发起,通过来设置的模式例如是否只读或读写,以及通过来获得一个。 //因为ES6写起来简洁,所以用ES6写法来作说明 //IDBTransacation接口由IndexedDB API提供,异步transaction使用数据库中的事件对象属性。所有的读取和写入数据均在trans...

    Rindia 评论0 收藏0
  • indexedDB事务功能Promise化封装(二)——利用generator完成同步化改造

    摘要:在不可以用的前提下,无论是同步化或者链式操作都用不了。于是昨天我自己实现了一个简单的同步执行的,并以此为基础实现了链式操作。 前言 本来这个系列应该不会这么快更新,然而昨晚写完前一篇后才发现我的思路中有一个巨大的漏洞。导致我在前一篇中花费大量时间实现了一个复杂的Transaction类——其实完全有更简单的方式来完成这一切。前篇:http://segmentfault.com/a/11...

    JackJiang 评论0 收藏0
  • 初探IndexedDB

    背景 随着前端技术日新月异地快速发展,web应用功能和体验也逐渐发展到可以和原生应用媲美的程度,前端缓存技术的应用对这起到了不可磨灭的贡献,因此想一探前端的缓存技术,这篇文章主要会介绍在日常开发中比较少接触的IndexedDB IndexedDB 什么是IndexedDB IndexedDB简单理解就是前端数据库,提供了一种在用户浏览器中持久存储数据的方法,但是和前端关系型数据不同的是,Index...

    jsyzchen 评论0 收藏0
  • indexedDB事务功能Promise化封装

    摘要:综上,对进行一定的封装,来简化编码操作。化的尝试对于这种带大量回调的,使用进行异步化封装是个好主意。因此包括在内的所有异步方法都会强制中止当前事务。这就决定了一个事务内部的所有操作必须是同步完成的。目前只实现了和,其他的有待下一步工作。 前言 本文是介绍我在编写indexedDB封装库中诞生的一个副产品——如何让indexedDB在支持链式调用的同时,保持对事务的支持。项目地址:htt...

    zombieda 评论0 收藏0

发表评论

0条评论

Alliot

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<