简介
IndexedDB 是一种在客户端存储数据的强大方式。如果您尚未查看，建议您阅读有关该主题的实用 MDN 教程。本文假定您具备有关 API 和功能的一些基础知识。即使您之前没见过 IndexedDB，也希望本文中的演示能让您了解 IndexedDB 的用途。
我们的演示是一个简单的公司内部网应用概念验证。员工可以使用该应用搜索其他员工。为了提供更快速、更快速的体验，将员工数据库复制到客户的机器上，并使用 IndexedDB 进行存储。此演示只是提供自动补全式的搜索和显示单个员工记录，但很棒的是，当这些数据在客户端上可用后，我们还可以通过多种其他方式使用它。下面简要概述了我们的应用需要执行的操作。
- 我们必须设置并初始化 IndexedDB 的实例。在大多数情况下，这很简单，但要让它同时在 Chrome 和 Firefox 中运行，则有点棘手。
- 我们需要看看是否有任何数据，如果没有，则下载数据。现在，通常是通过 AJAX 调用来完成此操作。在本演示中，我们创建了一个简单的实用程序类，用于快速生成虚构数据。应用需要识别自己何时创建此类数据，并在该时间之前阻止用户使用这些数据。此操作只需执行一次。用户下次运行应用时，便无需再执行此流程。更高级的演示会处理客户端和服务器之间的同步操作，但此演示更侧重于界面方面。
- 当应用准备就绪后，我们就可以使用 jQuery 界面的“自动补全”控件与 IndexedDB 同步。自动补全控件允许使用基本的数据列表和数据数组，但它有一个 API，支持使用任何数据源。我们将演示如何使用它连接到 IndexedDB 数据。
使用入门
本演示涉及多个部分，因此，首先我们来看一下 HTML 部分。
<form>
<p>
<label for="name">Name:</label> <input id="name" disabled> <span id="status"></span>
</p>
</form>
<div id="displayEmployee"></div>
不是很多，对吧？我们关注此界面的三个主要方面。第一个是将用于自动补全的字段“name”。它会以停用状态加载，稍后会通过 JavaScript 启用。旁边的 span 会在初始种子期间用于向用户提供更新。最后，当您从自动补全功能中选择员工时，系统会使用 id 为 displayEmployee 的 div。
现在，我们来看看 JavaScript。这里有很多内容需要消化，因此我们将逐步进行说明。完整代码会在文末提供，以便您查看完整代码。
首先，我们需要关注支持 IndexedDB 的浏览器中的一些前缀问题。以下是 Mozilla 文档中的一些代码，经过修改后可为应用所需的核心 IndexedDB 组件提供简单的别名。
window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB;
var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;
var IDBKeyRange = window.IDBKeyRange || window.webkitIDBKeyRange;
接下来，我们将介绍在整个演示中将要使用的几个全局变量：
var db;
var template;
现在，我们先从 jQuery 文档准备块开始：
$(document).ready(function() {
console.log("Startup...");
...
});
我们的演示使用 Handlebars.js 来显示员工详细信息。我们稍后会用到它，但现在可以先编译模板，然后再说。我们将脚本块设置为 Handlebars 识别的类型。这并不复杂，但确实可以更轻松地显示动态 HTML。
<h2>, </h2>
Department: <br/>
Email: <a href='mailto:'></a>
然后，我们会将其重新编译为 JavaScript，如下所示：
//Create our template
var source = $("#employeeTemplate").html();
template = Handlebars.compile(source);
现在，我们开始使用 IndexedDB。首先，我们将其打开
var openRequest = indexedDB.open("employees", 1);
打开与 IndexedDB 的连接后，我们就可以读取和写入数据了，但在此之前，我们必须确保有一个 objectStore。objectStore 类似于数据库表。一个 IndexedDB 可能有多个 objectStore，每个对象存储一个相关对象的集合。我们的演示非常简单，只需要一个名为“employee”的 objectStore。首次打开 IndexedDB 或更改代码中的版本时，系统会运行 onupgradeneeded 事件。我们可以使用它来设置 objectStore。
// Handle setup.
openRequest.onupgradeneeded = function(e) {
console.log("running onupgradeneeded");
var thisDb = e.target.result;
// Create Employee
if(!thisDb.objectStoreNames.contains("employee")) {
console.log("I need to make the employee objectstore");
var objectStore = thisDb.createObjectStore("employee", {keyPath: "id", autoIncrement: true});
objectStore.createIndex("searchkey", "searchkey", {unique: false});
}
};
openRequest.onsuccess = function(e) {
db = e.target.result;
db.onerror = function(e) {
alert("Sorry, an unforseen error was thrown.");
console.log("***ERROR***");
console.dir(e.target);
};
handleSeed();
};
在 onupgradeneeded 事件处理脚本块中，我们检查 objectStoreNames（一个对象存储区数组），以查看它是否包含 employee。如果没有，我们只需让它执行此操作。createIndex 调用非常重要。我们必须告知 IndexedDB 将使用键以外的哪些方法检索数据。我们将使用一个名为 searchkey 的键。稍后会对此进行说明。
onungradeneeded 事件将在我们第一次运行脚本时自动运行。执行后，或在以后的运行中跳过该处理程序，系统会运行 onsuccess 处理程序。我们定义了一个简单（且丑陋）的错误处理程序，然后调用 handleSeed。
因此，在继续之前，我们先快速回顾一下相关内容。我们打开数据库。检查对象存储是否存在。如果不存在，我们会创建一个。最后，我们调用名为 handleSeed 的函数。现在，我们将注意力转向演示中的数据种子部分。
提供一些数据！
如本文简介中所述，此演示将重新创建一个需要存储所有已知员工副本的 Intranet 风格应用。通常，这需要创建一个基于服务器的 API，该 API 可以返回员工数量，并提供一种检索批量记录的方法。假设有一个简单的服务，支持开始计数，并一次返回 100 人。当用户忙于做其他事情时，此操作可以在后台异步运行。
对于我们的演示，我们执行了一些简单的操作。我们可以查看 IndexedDB 中是否有对象（如果有，则有多少）。如果低于某个数量，我们只会创建虚构用户。否则，我们会认为种子部分已完成，并可以启用演示的自动补全部分。我们来看看 handleSeed。
function handleSeed() {
// This is how we handle the initial data seed. Normally this would be via AJAX.
db.transaction(["employee"], "readonly").objectStore("employee").count().onsuccess = function(e) {
var count = e.target.result;
if (count == 0) {
console.log("Need to generate fake data - stand by please...");
$("#status").text("Please stand by, loading in our initial data.");
var done = 0;
var employees = db.transaction(["employee"], "readwrite").objectStore("employee");
// Generate 1k people
for (var i = 0; i < 1000; i++) {
var person = generateFakePerson();
// Modify our data to add a searchable field
person.searchkey = person.lastname.toLowerCase();
resp = employees.add(person);
resp.onsuccess = function(e) {
done++;
if (done == 1000) {
$("#name").removeAttr("disabled");
$("#status").text("");
setupAutoComplete();
} else if (done % 100 == 0) {
$("#status").text("Approximately "+Math.floor(done/10) +"% done.");
}
}
}
} else {
$("#name").removeAttr("disabled");
setupAutoComplete();
}
};
}
由于我们将多个操作串联在一起，因此第一行有点复杂，下面我们来详细介绍一下：
db.transaction(["employee"], "readonly");
这会创建一个新的只读事务。使用 IndexedDB 进行的所有数据操作都需要某种事务。
objectStore("employee");
获取员工对象存储。
count()
运行 count API，该 API 会执行计数操作。
onsuccess = function(e) {
完成后，执行此回调。在回调内，我们可以获取结果值，即对象数量。如果计数为零，我们便会开始种子处理。
我们使用之前提到的状态 div 向用户发送消息，告知他们我们将开始获取数据。由于 IndexedDB 的异步特性，我们设置了一个简单的 done 变量来跟踪添加操作。然后我们一圈又一圈地插入假人。该函数的源代码在下载内容中提供，但它会返回一个如下所示的对象：
{
firstname: "Random Name",
lastname: "Some Random Last Name",
department: "One of 8 random departments",
email: "first letter of firstname+lastname@fakecorp.com"
}
这本身就足以定义一个人。不过，我们有特殊的要求，您需要满足才能搜索我们的数据。IndexedDB 不支持以不区分大小写的方式查找项目。因此，我们将 lastname 字段复制到新属性 searchkey 中。如果您还记得，这是我们之前说应该创建为数据索引的键。
// Modify our data to add a searchable field
person.searchkey = person.lastname.toLowerCase();
由于这是客户端专用修改，因此是在此处进行的，而不是在后端服务器（在本例中为虚构的后端服务器）上进行的。
要高效执行数据库添加操作，您应对所有批量写入重复使用该事务。如果您为每次写入创建一个新事务，浏览器可能会导致每次事务执行磁盘写入，这会导致在添加大量项时性能非常糟糕（想象一下“1 分钟写入 1,000 个对象”- 糟糕）。
种子完成后，系统会触发应用的下一部分 - setupAutoComplete。
创建自动补全
现在进入有趣的部分了 - 与 jQuery UI Autocomplete 插件建立关联。与大部分 jQuery 界面一样，我们从基本的 HTML 元素开始，并对其调用构造函数方法来进行增强。我们已将整个流程提取到一个名为 setupAutoComplete 的函数中。现在，我们来看看该代码。
function setupAutoComplete() {
//Create the autocomplete
$("#name").autocomplete({
source: function(request, response) {
console.log("Going to look for "+request.term);
$("#displayEmployee").hide();
var transaction = db.transaction(["employee"], "readonly");
var result = [];
transaction.oncomplete = function(event) {
response(result);
};
// TODO: Handle the error and return to it jQuery UI
var objectStore = transaction.objectStore("employee");
// Credit: http://stackoverflow.com/a/8961462/52160
var range = IDBKeyRange.bound(request.term.toLowerCase(), request.term.toLowerCase() + "z");
var index = objectStore.index("searchkey");
index.openCursor(range).onsuccess = function(event) {
var cursor = event.target.result;
if(cursor) {
result.push({
value: cursor.value.lastname + ", " + cursor.value.firstname,
person: cursor.value
});
cursor.continue();
}
};
},
minLength: 2,
select: function(event, ui) {
$("#displayEmployee").show().html(template(ui.item.person));
}
});
}
此代码中最复杂的部分是创建来源属性。借助 jQuery UI 的自动补全控件，您可以定义一个可自定义的来源属性，以满足任何可能的需求，甚至包括 IndexedDB 数据。该 API 为您提供请求（基本上就是在表单字段中输入的内容）和响应回调。您负责将结果数组发回给该回调。
我们首先要做的是隐藏 displayEmployee div。此 div 用于显示单个员工，如果之前加载了员工，则清除该员工。现在，我们可以开始搜索了。
我们首先创建一个只读事务、一个名为 result 的数组，以及一个简单地将结果传递给自动完成控件的 oncomplete 处理程序。
为了查找与输入内容匹配的项，我们可以利用 StackOverflow 用户 Fong-Wan Chau 提供的技巧：我们将基于输入内容的索引范围用作下限，将输入内容加上字母 z 用作上限。另请注意，我们会将字词转换为小写形式，以匹配我们输入的小写数据。
完成后，我们可以打开一个游标（可以看作是运行数据库查询），并对结果进行迭代。jQuery 界面的自动填充控件允许您返回所需的任何类型的数据，但至少需要一个值键。我们将该值设置为格式良好的名称版本。我们还会返回整个人物。稍后您就会明白原因。首先，下面是自动补全功能的屏幕截图。我们为 jQuery 界面使用 Vader 主题。
这本身就足以将 IndexedDB 匹配结果返回给自动补全功能。不过，我们还希望支持在选择某个匹配项时显示详细视图。在创建自动补全功能时，我们指定了一个选择处理脚本，该脚本使用了前面的 Handlebars 模板。