资讯专栏INFORMATION COLUMN

html5 indexeddb的简明api

luckyw / 1797人阅读

摘要:网上搜来一堆,,几乎没有找到满意的答案,经过汇总并结合自己的理解,封装了一套简单的是一个异步对象,必须使用回调函数方式进行调用打开一个数据库,支持两个参数,第二个参数指定版本号,我没用到,让浏览器自己创建版本号。

网上搜来一堆api,demo,几乎没有找到满意的答案,经过汇总并结合自己的理解,封装了一套简单的api

</>复制代码

  1. // indexedDB是一个异步对象,必须使用回调函数方式进行调用
  2. //打开一个数据库,open支持两个参数,第二个参数指定版本号,我没用到,让浏览器自己创建版本号。
  3. var request = indexedDB.open("myDbName");
  4. request.onsuccess = function(e) {
  5. //拿到db对象
  6. var db = e.target.result;
  7. //新增一个数据表:给数据表指定一个搜索的键值
  8. var store = db.createObjectStore("myTableName", {keyPath: "mykey"});
  9. // 创建数据库事务(不是很理解事务二字),我理解的是:指定一个即将用来读写的数据
  10. //除了新建数据表都用这一行代码 和上面的createObjectStore不能同时使用
  11. var transaction = db.transaction("myTableName", "readwrite").objectStore("myTableName");
  12. //到此,就可以进行数据库的数据表操作了
  13. //以下四个方法不是同时使用的,是分别封装在不同方法内的,这里为了演示,全部写一起了
  14. //增:增加一条数据 add(anything)
  15. //一般情况下不用add,而是用put方法
  16. var result = store.add({name:"mykey",value:"test1"});
  17. //删:删除一条数据 delete(keyPath)
  18. var result = store.delete("mykey");
  19. //改:修改一条数据,一般情况下put使用比较多
  20. var result = store.put({name:"mykey",value:"test value"});
  21. //查:读取一条数据
  22. var result = store.get("mykey");
  23. result.onsuccess = function(e) {
  24. //如果是get,这里就是读取的数据
  25. var obj = e.target.result;
  26. success(obj);
  27. };
  28. result.onerror = function(e) {
  29. };
  30. }
  31. request.onerror = function() {
  32. };

以下是我自己封装好的方法:

</>复制代码

  1. var myDb = {
  2. options:{
  3. dbName:"myDbName",
  4. tbName:"myTableName",
  5. keyPath:"name",
  6. },
  7. getIndexedDB: function(name) {
  8. var that = this;
  9. return new Promise(function(success, error) {
  10. // 打开数据库
  11. var request = indexedDB.open(that.options.dbName);
  12. request.onsuccess = function(e) {
  13. var database = e.target.result;
  14. // 操作数据表
  15. var store = database.transaction(that.options.tbName, "readwrite").objectStore(that.options.tbName);
  16. var result = store.get(name);
  17. result.onsuccess = function(e) {
  18. var obj = e.target.result;
  19. success(obj);
  20. };
  21. result.onerror = function(e) {
  22. error(obj);
  23. };
  24. }
  25. request.onerror = function() {
  26. error(event);
  27. };
  28. // 数据库不存在时,或者版本号不一致时,就会执行这里
  29. request.onupgradeneeded = function(e) {
  30. e.target.result.createObjectStore(that.options.tbName, { keyPath: that.options.keyPath });
  31. };
  32. });
  33. },
  34. getIndexedDBAll: function() {
  35. var that = this;
  36. return new Promise(function(success, error) {
  37. // 打开数据库
  38. var request = indexedDB.open(that.options.dbName);
  39. request.onsuccess = function(e) {
  40. var database = e.target.result;
  41. // 操作数据表
  42. var store = database.transaction(that.options.tbName, "readwrite").objectStore(that.options.tbName);
  43. var cursorRequest = store.openCursor();
  44. var list = [];
  45. cursorRequest.onsuccess = function(event) {
  46. var cursor = event.target.result;
  47. if (cursor) {
  48. var value = cursor.value;
  49. list.push(value);
  50. cursor.continue();
  51. } else {
  52. success(list);
  53. }
  54. }
  55. }
  56. request.onerror = function() {
  57. error(event);
  58. };
  59. // 数据库不存在时,或者版本号不一致时,就会执行这里
  60. request.onupgradeneeded = function(e) {
  61. e.target.result.createObjectStore(that.options.tbName, { keyPath: that.options.keyPath });
  62. };
  63. });
  64. },
  65. saveOneIndexedDB: function(keyValue) {
  66. var that = this;
  67. return new Promise(function(success, error) {
  68. // 打开数据库
  69. var request = indexedDB.open(that.options.dbName);
  70. request.onsuccess = function(e) {
  71. var database = e.target.result;
  72. var store = null;
  73. store = database.transaction(that.options.tbName, "readwrite").objectStore(that.options.tbName);
  74. var result = store.put(keyValue);
  75. result.onsuccess = function(event) {
  76. success(keyValue);
  77. };
  78. result.onerror = function(event) {
  79. error(event);
  80. };
  81. }
  82. request.onerror = function(event) {
  83. error(event)
  84. };
  85. // 数据库不存在时,或者版本号不一致时,就会执行这里
  86. request.onupgradeneeded = function(e) {
  87. var store = e.target.result.createObjectStore(that.options.tbName, { keyPath: that.options.keyPath });
  88. var result = store.put(keyValue);
  89. result.onsuccess = function(event) {
  90. success(keyValue);
  91. };
  92. result.onerror = function(event) {
  93. error(event);
  94. };
  95. };
  96. });
  97. },
  98. saveListIndexedDB: function(list, back, error) {
  99. var that = this;
  100. return Promise.all(list.map(function(v) {
  101. return that.saveOneIndexedDB(v);
  102. }));
  103. },
  104. deleteDB: function(name) {
  105. var that = this;
  106. return new Promise(function(success, error) {
  107. // 打开数据库
  108. var request = indexedDB.open(that.options.dbName);
  109. request.onsuccess = function(e) {
  110. var database = e.target.result;
  111. var store = database.transaction(that.options.tbName, "readwrite").objectStore(that.options.tbName);
  112. var result = store.delete(name);
  113. result.onsuccess = function(event) {
  114. success(name)
  115. };
  116. result.onerror = function(event) {
  117. error(event)
  118. };
  119. }
  120. request.onerror = function(event) {
  121. error(event)
  122. }
  123. // 数据库不存在时,或者版本号不一致时,就会执行这里
  124. request.onupgradeneeded = function(e) {
  125. e.target.result.createObjectStore(that.options.tbName, { keyPath: that.options.keyPath });
  126. };
  127. });
  128. }
  129. };

测试一下:

</>复制代码

  1. //设置数据库名称和表名
  2. myDb.options.dbName = "file_list";
  3. myDb.options.tbName = "files";
  4. //保存一条数据:
  5. myDb.saveOneIndexedDB({
  6. name:"test",
  7. file:"123123",
  8. }).then(function(file){
  9. /**file:{
  10. name:"test",
  11. file:"123123",
  12. }*/
  13. });
  14. //读取数据
  15. myDb.getIndexedDB("ex_zh.js").then(function(v){console.log(v)});

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

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

相关文章

  • 前端进阶系列(三):HTML5新特性

    摘要:是对标准的第五次修订。新特性语义特性赋予网页更好的意义和结构文件类型声明仅有一型。新的属性用于与用于用于。索引数据库从本质上说,允许用户在浏览器中保存大量的数据。 HTML5 是对 HTML 标准的第五次修订。其主要的目标是将互联网语义化,以便更好地被人类和机器阅读,并同时提供更好地支持各种媒体的嵌入。HTML5 的语法是向后兼容的。现在国内普遍说的 H5 是包括了 CSS3,Java...

    spademan 评论0 收藏0
  • 前端进阶系列(三):HTML5新特性

    摘要:是对标准的第五次修订。新特性语义特性赋予网页更好的意义和结构文件类型声明仅有一型。新的属性用于与用于用于。索引数据库从本质上说,允许用户在浏览器中保存大量的数据。 HTML5 是对 HTML 标准的第五次修订。其主要的目标是将互联网语义化,以便更好地被人类和机器阅读,并同时提供更好地支持各种媒体的嵌入。HTML5 的语法是向后兼容的。现在国内普遍说的 H5 是包括了 CSS3,Java...

    luffyZh 评论0 收藏0
  • 前端进阶系列(三):HTML5新特性

    摘要:是对标准的第五次修订。新特性语义特性赋予网页更好的意义和结构文件类型声明仅有一型。新的属性用于与用于用于。索引数据库从本质上说,允许用户在浏览器中保存大量的数据。 HTML5 是对 HTML 标准的第五次修订。其主要的目标是将互联网语义化,以便更好地被人类和机器阅读,并同时提供更好地支持各种媒体的嵌入。HTML5 的语法是向后兼容的。现在国内普遍说的 H5 是包括了 CSS3,Java...

    lemon 评论0 收藏0
  • IndexedDB--HTML5本地存储

    摘要:相比更加高效,包括索引事务处理和查询功能。在本地存储中,存储的数据是最多的,不像的,存储空间是无上限且永久的。由于受到的推崇。存储数据如果调用添加的数据与已存在的数据有相同的,浏览器会将新数据替换已存在的数据。 什么是IndexedDB indexedDB是一种轻量级NOSQL数据库,是由浏览器自带。相比Web Sql更加高效,包括索引、事务处理和查询功能。在HTML5本地存储中,In...

    explorer_ddf 评论0 收藏0

发表评论

0条评论

luckyw

|高级讲师

TA的文章

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