搜索
热搜： 编程 Python Microsoft 编程语言 C++
首页> 前端开发 > HTML5 > 正文

深入解析HTML5的IndexedDB索引数据库

发布时间：2023-01-01 05:36:48 来源：网络
.
早上好，给您新鲜的问候，温暖的祝福，清晨，美好的开端，祝您今天精神振奋，精力充沛，心情愉快，一切都很好！

介绍
IndexedDB是HTML5 WEB数据库，允许HTML5 WEB应用在用户浏览器端存储数据。对于应用来说IndexedDB非常强大、有用，可以在客户端的chrome,IE,Firefox等WEB浏览器中存储大量数据，下面简单介绍一下IndexedDB的基本概念。

什么是IndexedDB
IndexedDB，HTML5新的数据存储，可以在客户端存储、操作数据，可以使应用加载地更快，更好地响应。它不同于关系型数据库，拥有数据表、记录。它影响着我们设计和创建应用程序的方式。IndexedDB 创建有数据类型和简单的JavaScript持久对象的object，每个object可以有索引，使其有效地查询和遍历整个集合。本文为您提供了如何在Web应用程序中使用IndexedDB的真实例子。

开始
我们需要在执行前包含下面前置代码

JavaScript Code复制内容到剪贴板
  1. varindexedDB=window.indexedDB||window.mozIndexedDB||window.webkitIndexedDB||window.msIndexedDB;
  3. //prefixesofwindow.IDBobjects
  4. varIDBTransaction=window.IDBTransaction||window.webkitIDBTransaction||window.msIDBTransaction;
  5. varIDBKeyRange=window.IDBKeyRange||window.webkitIDBKeyRange||window.msIDBKeyRange
  7. if(!indexedDB){
  8. alert("Yourbrowserdoesn'tsupportastableversionofIndexedDB.")
  9. }


打开IndexedDB
在创建数据库之前，我们首先需要为数据库创建数据，假设我们有如下的用户信息：

JavaScript Code复制内容到剪贴板
  1. varuserData=[
  2. {id:"1",name:"Tapas",age:33,email:"tapas@example.com"},
  3. {id:"2",name:"Bidulata",age:55,email:"bidu@home.com"}
  4. ];

现在我们需要用open()方法打开我们的数据库:

JavaScript Code复制内容到剪贴板
  1. vardb;
  2. varrequest=indexedDB.open("databaseName",1);
  4. request.onerror=function(e){
  5. console.log("error:",e);
  6. };
  8. request.onsuccess=function(e){
  9. db=request.result;
  10. console.log("success:"+db);
  11. };
  12. request.onupgradeneeded=function(e){
  14. }

如上所示，我们已经打开了名为"databaseName"，指定版本号的数据库，open()方法有两个参数：
1.第一个参数是数据库名称，它会检测名称为"databaseName"的数据库是否已经存在，如果存在则打开它，否则创建新的数据库。
2.第二个参数是数据库的版本，用于用户更新数据库结构。

onSuccess处理
发生成功事件时“onSuccess”被触发，如果所有成功的请求都在此处理，我们可以通过赋值给db变量保存请求的结果供以后使用。

onerror的处理程序
发生错误事件时“onerror”被触发，如果打开数据库的过程中失败。

Onupgradeneeded处理程序
如果你想更新数据库（创建，删除或修改数据库），那么你必须实现onupgradeneeded处理程序，使您可以在数据库中做任何更改。 在“onupgradeneeded”处理程序中是可以改变数据库的结构的唯一地方。

创建和添加数据到表：
IndexedDB使用对象存储来存储数据，而不是通过表。 每当一个值存储在对象存储中，它与一个键相关联。 它允许我们创建的任何对象存储索引。 索引允许我们访问存储在对象存储中的值。 下面的代码显示了如何创建对象存储并插入预先准备好的数据：

JavaScript Code复制内容到剪贴板
  1. request.onupgradeneeded=function(event){
  2. varobjectStore=event.target.result.createObjectStore("users",{keyPath:"id"});
  3. for(variinuserData){
  4. objectStore.add(userData[i]);
  5. }
  6. }

我们使用createObjectStore（）方法创建一个对象存储。 此方法接受两个参数： - 存储的名称和参数对象。 在这里，我们有一个名为"users"的对象存储，并定义了keyPath，这是对象唯一性的属性。 在这里，我们使用“id”作为keyPath，这个值在对象存储中是唯一的，我们必须确保该“ID”的属性在对象存储中的每个对象中存在。 一旦创建了对象存储，我们可以开始使用for循环添加数据进去。

手动将数据添加到表：
我们可以手动添加额外的数据到数据库中。

JavaScript Code复制内容到剪贴板
  1. functionAdd(){
  2. varrequest=db.transaction(["users"],"readwrite").objectStore("users")
  3. .add({id:"3",name:"Gautam",age:30,email:"gautam@store.org"});
  5. request.onsuccess=function(e){
  6. alert("Gautamhasbeenaddedtothedatabase.");
  7. };
  9. request.onerror=function(e){
  10. alert("Unabletoaddtheinformation.");
  11. }
  13. }

之前我们在数据库中做任何的CRUD操作（读，写，修改），必须使用事务。 该transaction()方法是用来指定我们想要进行事务处理的对象存储。 transaction()方法接受3个参数（第二个和第三个是可选的）。 第一个是我们要处理的对象存储的列表，第二个指定我们是否要只读/读写，第三个是版本变化。

从表中读取数据
get()方法用于从对象存储中检索数据。 我们之前已经设置对象的id作为的keyPath，所以get()方法将查找具有相同id值的对象。 下面的代码将返回我们命名为“Bidulata”的对象：

JavaScript Code复制内容到剪贴板
  1. functionRead(){
  2. varobjectStore=db.transaction(["users"]).objectStore("users");
  3. varrequest=objectStore.get("2");
  4. request.onerror=function(event){
  5. alert("Unabletoretrievedatafromdatabase!");
  6. };
  7. request.onsuccess=function(event){
  8. if(request.result){
  9. alert("Name:"+request.result.name+",Age:"+request.result.age+",Email:"+request.result.email);
  10. }else{
  11. alert("Bidulatacouldn'tbefoundinyourdatabase!");
  12. }
  13. };
  14. }


从表中读取所有数据
下面的方法检索表中的所有数据。 这里我们使用游标来检索对象存储中的所有数据：

JavaScript Code复制内容到剪贴板
  1. functionReadAll(){
  2. varobjectStore=db.transaction("users").objectStore("users");
  3. varreq=objectStore.openCursor();
  4. req.onsuccess=function(event){
  5. db.close();
  6. varres=event.target.result;
  7. if(res){
  8. alert("Key"+res.key+"is"+res.value.name+",Age:"+res.value.age+",Email:"+res.value.email);
  9. res.continue();
  10. }
  11. };
  12. req.onerror=function(e){
  13. console.log("ErrorGetting:",e);
  14. };
  15. }

该openCursor()用于遍历数据库中的多个记录。 在continue()函数中继续读取下一条记录。
删除表中的记录
下面的方法从对象中删除记录。

JavaScript Code复制内容到剪贴板
  1. functionRemove(){
  2. varrequest=db.transaction(["users"],"readwrite").objectStore("users").delete("1");
  3. request.onsuccess=function(event){
  4. alert("Tapas'sentryhasbeenremovedfromyourdatabase.");
  5. };
  6. }

我们要将对象的keyPath作为参数传递给delete()方法。

最终代码
下面的方法从对象源中删除一条记录：

JavaScript Code复制内容到剪贴板
  1. <!DOCTYPEhtml>
  2. <head>
  3. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  4. <title>IndexedDB</title>
  5. <scripttype="text/javascript">
  6. varindexedDB=window.indexedDB||window.mozIndexedDB||window.webkitIndexedDB||window.msIndexedDB;
  8. //prefixesofwindow.IDBobjects
  9. varIDBTransaction=window.IDBTransaction||window.webkitIDBTransaction||window.msIDBTransaction;
  10. varIDBKeyRange=window.IDBKeyRange||window.webkitIDBKeyRange||window.msIDBKeyRange
  12. if(!indexedDB){
  13. alert("Yourbrowserdoesn'tsupportastableversionofIndexedDB.")
  14. }
  15. varcustomerData=[
  16. {id:"1",name:"Tapas",age:33,email:"tapas@example.com"},
  17. {id:"2",name:"Bidulata",age:55,email:"bidu@home.com"}
  18. ];
  19. vardb;
  20. varrequest=indexedDB.open("newDatabase",1);
  22. request.onerror=function(e){
  23. console.log("error:",e);
  24. };
  26. request.onsuccess=function(e){
  27. db=request.result;
  28. console.log("success:"+db);
  29. };
  31. request.onupgradeneeded=function(event){
  33. }
  34. request.onupgradeneeded=function(event){
  35. varobjectStore=event.target.result.createObjectStore("users",{keyPath:"id"});
  36. for(variinuserData){
  37. objectStore.add(userData[i]);
  38. }
  39. }
  40. functionAdd(){
  41. varrequest=db.transaction(["users"],"readwrite")
  42. .objectStore("users")
  43. .add({id:"3",name:"Gautam",age:30,email:"gautam@store.org"});
  45. request.onsuccess=function(e){
  46. alert("Gautamhasbeenaddedtothedatabase.");
  47. };
  49. request.onerror=function(e){
  50. alert("Unabletoaddtheinformation.");
  51. }
  53. }
  54. functionRead(){
  55. varobjectStore=db.transaction("users").objectStore("users");
  56. varrequest=objectStore.get("2");
  57. request.onerror=function(event){
  58. alert("Unabletoretrievedatafromdatabase!");
  59. };
  60. request.onsuccess=function(event){
  61. if(request.result){
  62. alert("Name:"+request.result.name+",Age:"+request.result.age+",Email:"+request.result.email);
  63. }else{
  64. alert("Bidulatacouldn'tbefoundinyourdatabase!");
  65. }
  66. };
  67. }
  68. functionReadAll(){
  69. varobjectStore=db.transaction("users").objectStore("users");
  70. varreq=objectStore.openCursor();
  71. req.onsuccess=function(event){
  72. db.close();
  73. varres=event.target.result;
  74. if(res){
  75. alert("Key"+res.key+"is"+res.value.name+",Age:"+res.value.age+",Email:"+res.value.email);
  76. res.continue();
  77. }
  78. };
  79. req.onerror=function(e){
  80. console.log("ErrorGetting:",e);
  81. };
  82. }
  83. functionRemove(){
  84. varrequest=db.transaction(["users"],"readwrite").objectStore("users").delete("1");
  85. request.onsuccess=function(event){
  86. alert("Tapas'sentryhasbeenremovedfromyourdatabase.");
  87. };
  88. }
  89. </script>
  90. </head>
  92. <body>
  93. <buttononclick="Add()">Addrecord</button>
  94. <buttononclick="Remove()">Deleterecord</button>
  95. <buttononclick="Read()">Retrievesinglerecord</button>
  96. <buttononclick="ReadAll()">Retrieveallrecords</button>
  97. </body>
  98. </html>

锁

localStorage是不带lock功能的。那么要实现前端的数据共享并且需要lock功能那就需要使用其它本储存方式，比如indexedDB。indededDB使用的是事务处理的机制，那实际上就是lock功能。
　　做这个测试需要先简单的封装下indexedDB的操作，因为indexedDB的连接比较麻烦，而且两个测试页面都需要用到

JavaScript Code复制内容到剪贴板
  1. //db.js
  2. //封装事务操作
  3. IDBDatabase.prototype.doTransaction=function(f){
  4. f(this.transaction(["Obj"],"readwrite").objectStore("Obj"));
  5. };
  6. //连接数据库，成功后调用main函数
  7. (function(){
  8. //打开数据库
  9. varcn=indexedDB.open("TestDB",1);
  10. //创建数据对象
  11. cn.onupgradeneeded=function(e){
  12. e.target.result.createObjectStore("Obj");
  13. };
  14. //数据库连接成功
  15. cn.onsuccess=function(e){
  16. main(e.target.result);
  17. };
  18. })();
  19. 　　接着是两个测试页面
  20. <scriptsrc="db.js"></script>
  21. <script>
  22. //a.html
  23. functionmain(e){
  24. (functioncallee(){
  25. //开始一个事务
  26. e.doTransaction(function(e){
  27. e.put(1,"test");//设置test的值为1
  28. e.put(2,"test");//设置test的值为2
  29. });
  30. setTimeout(callee);
  31. })();
  32. };
  33. </script>
  34. <scriptsrc="db.js"></script>
  35. <script>
  36. //b.html
  37. functionmain(e){
  38. (functioncallee(){
  39. //开始一个事务
  40. e.doTransaction(function(e){
  41. //获取test的值
  42. e.get("test").onsuccess=function(e){
  43. console.log(e.target.result);
  44. };
  45. });
  46. setTimeout(callee);
  47. })();
  48. };
  49. </script>

把localStorage换成了indexedDB事务处理。但是结果就不同

测试的时候b.html中可能不会立即有输出，因为indexedDB正忙着处理a.html东西，b.html事务丢在了事务丢队列中等待。但是无论如何，输出结果也不会是1这个值。因为indexedDB的最小处理单位是事务，而不是localStorage那样以表达式为单位。这样只要把lock和unlock之间需要处理的东西放入一个事务中即可实现。另外，浏览器对indexedDB的支持不如localStorage，所以使用时还得考虑浏览器兼容。

本文深入解析HTML5的IndexedDB索引数据库到此结束。当世界都在说放下的时候，轻轻的告诉自我：再试一次。小编再次感谢大家对我们的支持！

以下您可能有感兴趣的文章:
标签： IndexedDB
关于好代码 | 联系方式 | 版权声明 | 合作赞助 | 网站地图