• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营

    • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    深入解析HTML5的IndexedDB索引数据库

    介绍
    IndexedDB是HTML5 WEB数据库，允许HTML5 WEB应用在用户浏览器端存储数据。对于应用来说IndexedDB非常强大、有用，可以在客户端的chrome,IE,Firefox等WEB浏览器中存储大量数据，下面简单介绍一下IndexedDB的基本概念。
     
    什么是IndexedDB
    IndexedDB，HTML5新的数据存储，可以在客户端存储、操作数据，可以使应用加载地更快，更好地响应。它不同于关系型数据库，拥有数据表、记录。它影响着我们设计和创建应用程序的方式。IndexedDB 创建有数据类型和简单的JavaScript持久对象的object，每个object可以有索引，使其有效地查询和遍历整个集合。本文为您提供了如何在Web应用程序中使用IndexedDB的真实例子。
     
    开始
    我们需要在执行前包含下面前置代码

    JavaScript Code复制内容到剪贴板
    1. var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;   
    2.     
    3. //prefixes of window.IDB objects   
    4. var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;   
    5. var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange   
    6.     
    7. if (!indexedDB) {   
    8. alert("Your browser doesn't support a stable version of IndexedDB.")   
    9. }  

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

    JavaScript Code复制内容到剪贴板
    1. var userData = [   
    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. var db;   
    2. var request = indexedDB.open("databaseName", 1);   
    3.     
    4. request.onerror = function(e) {   
    5. console.log("error: ", e);   
    6. };   
    7.     
    8. request.onsuccess = function(e) {   
    9. db = request.result;   
    10. console.log("success: "+ db);   
    11. };   
    12. request.onupgradeneeded = function(e) {   
    13.     
    14. }  

    如上所示，我们已经打开了名为"databaseName"，指定版本号的数据库，open()方法有两个参数：
    1.第一个参数是数据库名称，它会检测名称为"databaseName"的数据库是否已经存在，如果存在则打开它，否则创建新的数据库。
    2.第二个参数是数据库的版本，用于用户更新数据库结构。
     
    onSuccess处理
    发生成功事件时“onSuccess”被触发，如果所有成功的请求都在此处理，我们可以通过赋值给db变量保存请求的结果供以后使用。
     
    onerror的处理程序
    发生错误事件时“onerror”被触发，如果打开数据库的过程中失败。
     
    Onupgradeneeded处理程序
    如果你想更新数据库（创建，删除或修改数据库），那么你必须实现onupgradeneeded处理程序，使您可以在数据库中做任何更改。 在“onupgradeneeded”处理程序中是可以改变数据库的结构的唯一地方。
     
    创建和添加数据到表：
    IndexedDB使用对象存储来存储数据，而不是通过表。 每当一个值存储在对象存储中，它与一个键相关联。 它允许我们创建的任何对象存储索引。 索引允许我们访问存储在对象存储中的值。 下面的代码显示了如何创建对象存储并插入预先准备好的数据：

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

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

    JavaScript Code复制内容到剪贴板
    1. function Add() {   
    2. var request = db.transaction(["users"], "readwrite").objectStore("users")   
    3. .add({ id: "3", name: "Gautam", age: 30, email: "gautam@store.org" });   
    4.     
    5. request.onsuccess = function(e) {   
    6. alert("Gautam has been added to the database.");   
    7. };   
    8.     
    9. request.onerror = function(e) {   
    10. alert("Unable to add the information.");    
    11. }   
    12.     
    13. }  

    之前我们在数据库中做任何的CRUD操作（读，写，修改），必须使用事务。 该transaction()方法是用来指定我们想要进行事务处理的对象存储。 transaction()方法接受3个参数（第二个和第三个是可选的）。 第一个是我们要处理的对象存储的列表，第二个指定我们是否要只读/读写，第三个是版本变化。
     
    从表中读取数据
    get()方法用于从对象存储中检索数据。 我们之前已经设置对象的id作为的keyPath，所以get()方法将查找具有相同id值的对象。 下面的代码将返回我们命名为“Bidulata”的对象：

    JavaScript Code复制内容到剪贴板
    1. function Read() {   
    2. var objectStore = db.transaction(["users"]).objectStore("users");   
    3. var request = objectStore.get("2");   
    4. request.onerror = function(event) {   
    5. alert("Unable to retrieve data from database!");   
    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("Bidulata couldn't be found in your database!");    
    12. }   
    13. };   
    14. }  

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

    JavaScript Code复制内容到剪贴板
    1. function ReadAll() {   
    2. var objectStore = db.transaction("users").objectStore("users");    
    3. var req = objectStore.openCursor();   
    4. req.onsuccess = function(event) {   
    5. db.close();   
    6. var res = 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("Error Getting: ", e);   
    14. };    
    15. }  

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

    JavaScript Code复制内容到剪贴板
    1. function Remove() {    
    2. var request = db.transaction(["users"], "readwrite").objectStore("users").delete("1");   
    3. request.onsuccess = function(event) {   
    4. alert("Tapas's entry has been removed from your database.");   
    5. };   
    6. }  

    我们要将对象的keyPath作为参数传递给delete()方法。
     
    最终代码
    下面的方法从对象源中删除一条记录：

    JavaScript Code复制内容到剪贴板
    1. <!DOCTYPE html>  
    2. <head>  
    3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
    4. <title>IndexedDB</title>  
    5. <script type="text/javascript">  
    6. var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;   
    7.     
    8. //prefixes of window.IDB objects   
    9. var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;   
    10. var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange   
    11.     
    12. if (!indexedDB) {   
    13. alert("Your browser doesn't support a stable version of IndexedDB.")   
    14. }   
    15. var customerData = [   
    16. { id: "1", name: "Tapas", age: 33, email: "tapas@example.com" },   
    17. { id: "2", name: "Bidulata", age: 55, email: "bidu@home.com" }   
    18. ];   
    19. var db;   
    20. var request = indexedDB.open("newDatabase", 1);   
    21.     
    22. request.onerror = function(e) {   
    23. console.log("error: ", e);   
    24. };   
    25.     
    26. request.onsuccess = function(e) {   
    27. db = request.result;   
    28. console.log("success: "+ db);   
    29. };   
    30.     
    31. request.onupgradeneeded = function(event) {   
    32.     
    33. }   
    34. request.onupgradeneeded = function(event) {   
    35. var objectStore = event.target.result.createObjectStore("users", {keyPath: "id"});   
    36. for (var i in userData) {   
    37. objectStore.add(userData[i]);    
    38. }   
    39. }   
    40. function Add() {   
    41. var request = db.transaction(["users"], "readwrite")   
    42. .objectStore("users")   
    43. .add({ id: "3", name: "Gautam", age: 30, email: "gautam@store.org" });   
    44.     
    45. request.onsuccess = function(e) {   
    46. alert("Gautam has been added to the database.");   
    47. };   
    48.     
    49. request.onerror = function(e) {   
    50. alert("Unable to add the information.");    
    51. }   
    52.     
    53. }   
    54. function Read() {   
    55. var objectStore = db.transaction("users").objectStore("users");   
    56. var request = objectStore.get("2");   
    57. request.onerror = function(event) {   
    58. alert("Unable to retrieve data from database!");   
    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("Bidulata couldn't be found in your database!");    
    65. }   
    66. };   
    67. }   
    68. function ReadAll() {   
    69. var objectStore = db.transaction("users").objectStore("users");    
    70. var req = objectStore.openCursor();   
    71. req.onsuccess = function(event) {   
    72. db.close();   
    73. var res = 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("Error Getting: ", e);   
    81. };    
    82. }   
    83. function Remove() {    
    84. var request = db.transaction(["users"], "readwrite").objectStore("users").delete("1");   
    85. request.onsuccess = function(event) {   
    86. alert("Tapas's entry has been removed from your database.");   
    87. };   
    88. }   
    89. </script>  
    90. </head>  
    91.     
    92. <body>  
    93. <button onclick="Add()">Add record</button>  
    94. <button onclick="Remove()">Delete record</button>  
    95. <button onclick="Read()">Retrieve single record</button>  
    96. <button onclick="ReadAll()">Retrieve all records</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.   var cn=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. <script src="db.js"></script>  
    21. <script>  
    22. //a.html   
    23. function main(e){   
    24.   (function callee(){   
    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. <script src="db.js"></script>  
    35. <script>  
    36. //b.html   
    37. function main(e){   
    38.   (function callee(){   
    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的表单验证的简单示例
    下一篇：利用HTML5实现使用按钮控制背景音乐开关
  • 相关文章
    • 

    © 2016-2020 巨人网络通讯

    时间：9:00-21:00 (节假日不休)

    地址：江苏信息产业基地11号楼四层

    《增值电信业务经营许可证》 苏B2-20120278

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