简介
IndexedDB是HTML5中的新增功能。网络数据库托管并留存在用户的浏览器内。只要让开发人员通过丰富的查询功能创建应用，就可以预见到，将会出现能够同时在线和离线使用的新型网络应用。
IndexedDB是什么？
IndexedDB是对象存储，它不同于带有表格（包含行和列的集合）的关系数据库。这是一个重要的根本区别，并且会影响您设计和构建应用的方式。
在传统的关系数据存储中，我们有一个“待办事项”的表格，其中各行存储了用户待办事项数据的集合，而各列则是数据的命名类型。要插入数据，通常采用如下语义：INSERTINTO Todo(id, data, update_time) VALUES (1, "Test","01/01/2010");
IndexedDB的不同之处在于，您可以创建某个类型数据的对象存储，然后只需将JavaScript对象留存在该存储中即可。每个对象存储都可以有索引的集合，这样就能进行高效的查询和迭代。
IndexedDB 还废除了标准查询语言( SQL)的概念，取而代之的是针对索引的查询，这样可以产生一个指针，用于在结果集之间迭代。
本教程只是举了一个实际示例，告诉您针对编写为使用WebSQL 的现有应用如何使用IndexedDB。
为什么是 IndexedDB？
在 2010 年 11月 18 日，W3C宣布弃用Web SQL数据库规范。这也就是建议网络开发人员不要再使用这种技术了，该规范也不会再获得新的更新，而且不鼓励浏览器供应商支持该技术。
取而代之的是 IndexedDB，本教程的主题是开发人员应使用这种数据存储在客户端上存储数据并进行操作。
各大主流浏览器（包括 Chrome浏览器、Safari、Opera等）和几乎所有基于Webkit的移动设备均支持WebSQL，并且很有可能在可预见的未来继续提供支持。
先决条件
该示例使用命名空间封装数据库逻辑。
[html]
var html5rocks = {}; html5rocks.indexedDB = {}; var html5rocks = {};
html5rocks.indexedDB = {};异步和事务性
在大多数情况下，如果您使用的是索引型数据库，那么就会使用异步API。异步API是非阻塞系统，因此不会通过返回值获得数据，而是获得传递到指定回调函数的数据。
通过 HTML 支持IndexedDB是事务性的。在事务之外是无法执行命令或打开指针的。事务包括如下类型：读/写事务、只读事务和快照事务。在本教程中，我们使用的是读/写事务。
第 1步：打开数据库
您必须先打开数据库，才能对其进行操作。
[html]
html5rocks.indexedDB.db = null; html5rocks.indexedDB.open = function() { var request = indexedDB.open("todos"); request.onsuccess = function(e) { html5rocks.indexedDB.db = e.target.result; // Do some more stuff in a minute }; request.onfailure = html5rocks.indexedDB.onerror; }; html5rocks.indexedDB.db = null;
html5rocks.indexedDB.open = function() {
var request = indexedDB.open("todos");
request.onsuccess = function(e) {
html5rocks.indexedDB.db = e.target.result;
// Do some more stuff in a minute
};
request.onfailure = html5rocks.indexedDB.onerror;
};我们已打开称为“todos”的数据库，并已将其分配给html5rocks.indexedDB对象中的db变量。现在我们可以在整个教程中使用此变量来引用我们的数据库。
第 2步：创建对象存储
您只能在“SetVersion”事务内创建对象存储。我还没有介绍setVersion，这是一个非常重要的方法，这是代码中唯一能够供您创建对象存储和索引的地方。
[html]
html5rocks.indexedDB.open = function() { var request = indexedDB.open("todos", "This is a description of the database."); request.onsuccess = function(e) { var v = "1.0"; html5rocks.indexedDB.db = e.target.result; var db = html5rocks.indexedDB.db; // We can only create Object stores in a setVersion transaction; if(v!= db.version) { var setVrequest = db.setVersion(v); // onsuccess is the only place we can create Object Stores setVrequest.onfailure = html5rocks.indexedDB.onerror; setVrequest.onsuccess = function(e) { var store = db.createObjectStore("todo", {keyPath: "timeStamp"}); html5rocks.indexedDB.getAllTodoItems(); }; } html5rocks.indexedDB.getAllTodoItems(); }; request.onfailure = html5rocks.indexedDB.onerror; } html5rocks.indexedDB.open = function() {
var request = indexedDB.open("todos",
"This is a description of the database.");
request.onsuccess = function(e) {
var v = "1.0";
html5rocks.indexedDB.db = e.target.result;
var db = html5rocks.indexedDB.db;
// We can only create Object stores in a setVersion transaction;
if(v!= db.version) {
var setVrequest = db.setVersion(v);
// onsuccess is the only place we can create Object Stores
setVrequest.onfailure = html5rocks.indexedDB.onerror;
setVrequest.onsuccess = function(e) {
var store = db.createObjectStore("todo",
{keyPath: "timeStamp"});
html5rocks.indexedDB.getAllTodoItems();
};
}
html5rocks.indexedDB.getAllTodoItems();
};
request.onfailure = html5rocks.indexedDB.onerror;
}上述代码其实有很多功能。我们在 API中定义了“open”方法，调用此方法即可打开“todos”数据库。打开请求不是立刻执行的，而是返回IDBRequest。如果当前函数存在，则会调用indexedDB.open方法。这与我们通常指定异步回调的方法略有不同，但是我们在回调执行前，有机会向IDBRequest对象附加我们自己的易做图。
如果打开请求成功了，我们的 onsuccess回调就会执行。在此回调中，我们应检查数据库版本，如果与预期版本不符，则调用“setVersion”。
setVersion 是代码中唯一能让我们改变数据库结构的地方。在setVersion中，我们可以创建和删除对象存储，以及构建和删除索引。调用setVersion可返回IDBRequest对象，供我们在其中附加回调。如果成功了，我们就开始创建对象存储。
通过对 createObjectStore单次调用创建对象存储。该方易做图命名存储以及参数对象。参数对象非常重要，它可让您定义重要的可选属性。就我们而言，定义keyPath属性可让单个对象在存储中具备唯一性。本例中的该属性为“timeStamp”。objectStore中存储的每个对象都必须有“timeStamp”。
创建了对象存储后，我们调用 getAllTodoItems方法。
第 3步：向对象存储添加数据
我们要构建的是待办事项列表管理器，因此必须要能够向数据库中添加待办事项。方法如下：
[html]
html5rocks.indexedDB.addTodo = function(todoText) { var db = html5rocks.indexedDB.db; var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE, 0); var store = trans.objectStore("todo"); var re
补充：web前端 , HTML 5 ,
