HTML5 IndexedDB

简介

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 request = store.put({      "text": todoText,      "timeStamp" : new Date().getTime()    });      request.onsuccess = function(e) {      // Re-render all the todo's      html5rocks.indexedDB.getAllTodoItems();    };      request.onerror = function(e) {      console.log(e.value);    };  };  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 request = store.put({

    "text": todoText,

    "timeStamp" : new Date().getTime()

  });

 

  request.onsuccess = function(e) {

    // Re-render all the todo's

    html5rocks.indexedDB.getAllTodoItems();

  };

 

  request.onerror = function(e) {

    console.log(e.value);

  };

};addTodo方法非常简单，我们首先获得数据库对象的快速引用，初始化READ_WRITE事务，并获得我们对象存储的引用。

 

既然应用有权访问对象存储，我们就可以通过基础JSON 对象发出简单的put命令。请注意timeStamp属性，这是对象的唯一密钥，并作为“keyPath”使用。put调用成功后，会触发onsuccess事件，然后我们就可以在屏幕上呈现内容了。

 

第 4步：查询存储中的数据。

既然数据已经在数据库中了，我们就需要通过某种方法以有意义的方式访问数据。幸运的是，这样的方法非常简单直接：

 

[html] 

html5rocks.indexedDB.getAllTodoItems = function() {    var todos = document.getElementById("todoItems");    todos.innerHTML = "";      var db = html5rocks.indexedDB.db;    var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE, 0);    var store = trans.objectStore("todo");      // Get everything in the store;    var keyRange = IDBKeyRange.lowerBound(0);    var cursorRequest = store.openCursor(keyRange);      cursorRequest.onsuccess = function(e) {      var result = e.target.result;      if(!!result == false)        return;        renderTodo(result.value);      result.continue();    };      cursorRequest.onerror = html5rocks.indexedDB.onerror;  };  html5rocks.indexedDB.getAllTodoItems = function() {

  var todos = document.getElementById("todoItems");

  todos.innerHTML = "";

 

  var db = html5rocks.indexedDB.db;

  var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE, 0);

  var store = trans.objectStore("todo");

 

  // Get everything in the store;

  var keyRange = IDBKeyRange.lowerBound(0);

  var cursorRequest = store.openCursor(keyRange);

 

  cursorRequest.onsuccess = function(e) {

    var result = e.target.result;

    if(!!result == false)

      return;

 

    renderTodo(result.value);

    result.continue();

  };

 

  cursorRequest.onerror = html5rocks.indexedDB.onerror;

};请注意，本例中使用的所有这些命令都是异步的，因此数据不是从事务内部返回的。

 

该代码可生成事务，并将对于数据的 keyRange搜索实例化。keyRange定义了我们要从存储中查询的简单数据子集。如果存储的keyRange是数字时间戳，我们应将搜索的最小值设为0（时间原点后的任何时间），这样就能返回所有数据。

 

现在我们有了事务、对要查询的存储的引用以及要迭代的范围。剩下的工作就是打开指针并附加“onsuccess”事件了。

 

结果会传递到对指针的成功回调，并在其中呈现。对于每个结果只会启动一次回调，因此请务必持续迭代您需要的数据，以确保对结果对象调用“continue”。

 

第 4 步：呈现对象存储中的数据

从对象存储中抓取了数据后，将对指针中的每个结果调用renderTodo方法。

 

[html] 

function renderTodo(row) {    var todos = document.getElementById("todoItems");    var li = document.createElement("li");    var a = document.createElement("a");    var t = document.createTextNode();    t.data = row.text;      a.addEventListener("click", function(e) {      html5rocks.indexedDB.deleteTodo(row.text);    });      a.textContent = " [Delete]";    li.appendChild(t);    li.appendChild(a);    todos.appendChild(li)  }  function renderTodo(row) {

  var todos = document.getElementById("todoItems");

  var li = document.createElement("li");

  var a = document.createElement("a");

  var t = document.createTextNode();

  t.data = row.text;

 

  a.addEventListener("click", function(e) {

    html5rocks.indexedDB.deleteTodo(row.text);

  });

 

  a.textContent = " [Delete]";

  li.appendChild(t);

  li.appendChild(a);

  todos.appendChild(li)

}对于某个指定的待办事项，我们只需要获取文本并为其制作用户界面（包括“删除”按钮，以便删除待办事项）。

 

第 5步：删除表格中的数据

[html] 

html5rocks.indexedDB.deleteTodo = function(id) {    var db = html5rocks.indexedDB.db;    var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE, 0);    var store = trans.objectStore("todo");      var request = store.delete(id);      request.onsuccess = function(e) {      html5rocks.indexedDB.getAllTodoItems();  // Refresh the screen    };      request.onerror = function(e) {      console.log(e);    };  };  html5rocks.indexedDB.deleteTodo = function(id) {

  var db = html5rocks.indexedDB.db;

  var trans = db.transaction(["todo"], IDBTransaction.READ_WRITE, 0);

  var store = trans.objectStore("todo");

 

  var request = store.delete(id);

 

  request.onsuccess = function(e) {

    html5rocks.indexedDB.getAllTodoItems();  // Refresh the screen

  };

 

  request.onerror = function(e) {

    console.log(e);

  };

};正如将数据 put到对象存储中的代码一样，删除数据也很简单。启动一个事务，通过对象引用对象存储，然后通过对象的唯一ID发出delete命令。

 

第 6步：全部关联起来

在加载网页时，打开数据库并创建表格（如有必要），然后呈现数据库中可能已存在的任何待办事项。

 

[html] 

function init() {    html5rocks.indexedDB.open(); // open displays the data previously saved  }    window.addEventListener("DOMContentLoaded", init, false);  function init() {

  html5rocks.indexedDB.open(); // open displays the data previously saved

}

 

window.addEventListener("DOMContentLoaded", init, false);这需要用到可将数据取出 DOM的函数，即 html5rocks.indexedDB.addTodo方法： 

 

[html] 

function addTodo() {    var todo = document.getElementById('todo');      html5rocks.indexedDB.addTodo(todo.value);  

如对本文有疑问， 点击进行留言回复！！