首页 > 编程 > HTML > 正文

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

2020-03-24 15:48:40
字体:
来源:转载
供稿:网友

  介绍

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

  什么是IndexedDB

  IndexedDB,HTML5新的数据存储,可以在客户端存储、操作数据,可以使应用加载地更快,更好地响应。它不同于关系型数据库,拥有数据表、记录。它影响着我们设计和创建html' target='_blank'>应用程序的方式。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: "[email protected]" },

  { id: "2", name: "Bidulata", age: 55, email: "[email protected]" }

  ];

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

郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表