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

10/24/2015来源:HTML教程人气:2538

  介绍

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

  什么是IndexedDB

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

  开始

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

  Javascript Code复制内容到剪贴板

  var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;

  //PRefixes of window.IDB objects

  var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction;

  var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange

  if (!indexedDB) {

  alert("Your browser doesn't support a stable version of IndexedDB.")

  }

  打开IndexedDB

  在创建数据库之前,我们首先需要为数据库创建数据,假设我们有如下的用户信息:

  JavaScript Code复制内容到剪贴板

  var userData = [

  { id: "1", name: "Tapas", age: 33, email: "tapas@example.com" },

  { id: "2", name: "Bidulata", age: 55, email: "bidu@home.com" }

  ];

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

  JavaScript Code复制内容到剪贴板

  var db;

  var request = indexedDB.open("databaseName", 1);

  request.onerror = function(e) {

  console.log("error: ", e);

  };

  request.onsuccess = function(e) {

  db = request.result;

  console.log("success: "+ db);

  };

  request.onupgradeneeded = function(e) {

  }

  如上所示,我们已经打开了名为"databaseName",指定版本号的数据库,open()方法有两个参数:

  1.第一个参数是数据库名称,它会检测名称为"databaseName"的数据库是否已经存在,如果存在则打开它,否则创建新的数据库。

  2.第二个参数是数据库的版本,用于用户更新数据库结构。

  onSuccess处理

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

  onerror的处理程序

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

  Onupgradeneeded处理程序

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

  创建和添加数据到表:

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

  JavaScript Code复制内容到剪贴板

  request.onupgradeneeded = function(event) {

  var objectStore = event.target.result.createObjectStore("users", {keyPath: "id"});

  for (var i in userData) {

  objectStore.add(userData[i]);

  }

  }

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

  手动将数据添加到表:

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

  JavaScript Code复制内容到剪贴板

  function Add() {

  var request = db.transaction(["users"], "readwrite").objectStore("users")

  .add({ id: "3", name: "Gautam", age: 30, email: "gautam@store.org" });

  request.onsuccess = function(e) {

  alert("Gautam has been added to the database.");

  };

  request.onerror = function(e) {

  alert("Unable to add the information.");

  }

  }

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

  从表中读取数据

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

  JavaScript Code复制内容到剪贴板

  function Read() {

  var objectStore = db.transaction(["users"]).objectStore("users");

  var request = objectStore.get("2");

  request.onerror = function(event) {

  alert("Unable to retrieve data from database!");

  };

  request.onsuccess = function(event) {

  if(request.result) {

  alert("Name: " + request.result.name + ", Age: " + request.result.age + ", Email: " + request.result.email);

  } else {

  alert("Bidulata couldn't be found in your database!");

  }

  };

  }

  从表中读取所有数据

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

  JavaScript Code复制内容到剪贴板

  function ReadAll() {

  var objectStore = db.transaction("users").objectStore("users");

  var req = objectStore.openCursor();

  req.onsuccess = function(event) {

  db.close();

  var res = event.target.result;

  if (res) {

  alert("Key " + res.key + " is " + res.value.name + ", Age: " + res.value.age + ", Email: " + res.value.email);

  res.continue();

  }

  };

  req.onerror = function (e) {

  console.log("Error Getting: ", e);

  };

  }

  该openCursor()用于遍历数据库中的多个记录。 在continue()函数中继续读取下一条记录。

  删除表中的记录

  下面的方法从对象中删除记录。

  JavaScript Code复制内容到剪贴板

  function Remove() {

  var request = db.transaction(["users"], "readwrite").objectStore("users").delete("1");

  request.onsuccess = function(event) {

  alert("Tapas's entry has been removed from your database.");

  };

  }

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

  最终代码

  下面的方法从对象源中删除一条记录:

  JavaScript Code复制内容到剪贴板

  1. <!DOCTYPE html> <head>
  2. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>IndexedDB</title>
  3. <script type="text/javascript"> var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;
  4. //prefixes of window.IDB objects
  5. var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction || window.msIDBTransaction; var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange || window.msIDBKeyRange
  6. if (!indexedDB) {
  7. alert("Your browser doesn't support a stable version of IndexedDB.") }
  8. var customerData = [ { id: "1", name: "Tapas", age: 33, email: "tapas@example.com" },
  9. { id: "2", name: "Bidulata", age: 55, email: "bidu@home.com" } ];
  10. var db; var request = indexedDB.open("newDatabase", 1);
  11. request.onerror = function(e) {
  12. console.log("error: ", e); };
  13. request.onsuccess = function(e) {
  14. db = request.result; console.log("success: "+ db);
  15. };
  16. request.onupgradeneeded = function(event) {
  17. } request.onupgradeneeded = function(event) {
  18. var objectStore = event.target.result.createObjectStore("users", {keyPath: "id"}); for (var i in userData) {
  19. objectStore.add(userData[i]); }
  20. } function Add() {
  21. var request = db.transaction(["users"], "readwrite") .objectStore("users")
  22. .add({ id: "3", name: "Gautam", age: 30, email: "gautam@store.org" });
  23. request.onsuccess = function(e) { alert("Gautam has been added to the database.");
  24. };
  25. request.onerror = function(e) { alert("Unable to add the information.");
  26. }
  27. } function Read() {
  28. var objectStore = db.transaction("users").objectStore("users"); var request = objectStore.get("2");
  29. request.onerror = function(event) { alert("Unable to retrieve data from database!");
  30. }; request.onsuccess = function(event) {
  31. if(request.result) { alert("Name: " + request.result.name + ", Age: " + request.result.age + ", Email: " + request.result.email);
  32. } else { alert("Bidulata couldn't be found in your database!");
  33. } };
  34. } function ReadAll() {
  35. var objectStore = db.transaction("users").objectStore("users"); var req = objectStore.openCursor();
  36. req.onsuccess = function(event) { db.close();
  37. var res = event.target.result; if (res) {
  38. alert("Key " + res.key + " is " + res.value.name + ", Age: " + res.value.age + ", Email: " + res.value.email); res.continue();
  39. } };
  40. req.onerror = function (e) { console.log("Error Getting: ", e);
  41. }; }
  42. function Remove() { var request = db.transaction(["users"], "readwrite").objectStore("users").delete("1");
  43. request.onsuccess = function(event) { alert("Tapas's entry has been removed from your database.");
  44. }; }
  45. </script> </head>
  46. <body>
  47. <button onclick="Add()">Add record</button> <button onclick="Remove()">Delete record</button>
  48. <button onclick="Read()">Retrieve single record</button> <button onclick="ReadAll()">Retrieve all records</button>
  49. </body> </html>