学生教材网 >电脑教程 > 网页设计 > HTML5 > 浏览文章

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

来源:网络编辑:佚名时间:2015-09-10人气:

儒勒61凡尔纳,诗琪,穿越小说完结

   介绍

  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) {

5个国际经典大牌的顶尖HTML 5案例放送

在国内Html5势头正猛的时候,国外同行也不甘示弱。今天精选的这5个Html5案例,甲方都是不差钱的企业,宝马、阿迪达斯、宝洁等,作品质量无出其右,有没有差距,体验就知道。

热门推荐