使用 IndexedDB

  • 版本网址缩略名: IndexedDB/Using_IndexedDB
  • 版本标题: Using IndexedDB
  • 版本 id: 304535
  • 创建于:
  • 创建者: karsa.si
  • 是否是当前版本?
  • 评论

修订内容

IndexedDB是使用浏览器将数据存储到本地的方式,相当于一个key-value数据库. 它可以使得web应用程序大大的提升, 使得你的web程序可以工作在离线. 

IndexedDB 包含一组synchronous(同步) 和一组 asynchronous(异步) API. 同步API是设计为和WebWorkers一起使用的, 并且现在没有被任何浏览器支持. 当然啦, WebWorkers支持异步API. 大多数情况下我们将使用异步api, 这篇文章是说如何使用异步api的.  

关于这篇文档

这篇文档说明indexedDB的基本用法。如果你对key-value型数据库不熟,请你先阅读 Basic Concepts About IndexedDB.

For the reference documentation on the IndexedDB API, see the IndexedDB article and its subpages, which document the types of objects used by IndexedDB, as well as the methods of both the synchronous and asynchronous APIs. 

Basic pattern

The basic pattern that IndexedDB encourages is the following:

  1. Open a database and start a transaction.
  2. Create an object store. 
  3. Make a request to do some database operation, like adding or retrieving data.
  4. Wait for the operation to complete by listening to the right kind of DOM event.
  5. Do something with the results (which can be found on the request object).

OK, so, now with these big concepts under our belts, we can get to more concrete stuff.

Creating and structuring the store

Because the specification is still evolving, current implementations of IndexedDB hide under browser prefixes. Browser vendors may have different implementations of the standard IndexedDB API until the specification has solidified. But once concensus is reached on the standard, the vendors implement it without the prefix tags.  Gecko-based browsers use the moz prefix, while WebKit-based browsers use the webkit prefix. In the sample code, just replace the methods with the appropriate prefix (for example, if you are creating an app on Google Chrome, use webkitIndexedDB.open() instead of mozIndexedDB.open()) or just use the snippet of code in the next section.

Opening a database

Start the whole process like this:

// This will improve our code to be more readable and shorter
window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
// Now we can open our database
var request = window.indexedDB.open("MyTestDatabase");

See that? Opening a database is just like any other operation — you have to "request" it.

The IndexedDB object has just a single method, open(), which, when called, opens the database called "MyTestDatabase." All IndexedDB databases are stored in the same origin, so mozilla.com might have a database named "binky" and mozilla.org might have a totally distinct database named "binky". If the database does not exist, then it is created; if the database already exists, then it is simply opened.

The open request doesn't open the database or start the transaction right away.  The call to the open() function returns an IDBRequest object with a result (success) or error value that you handle as an event. Most other asynchronous functions in IndexedDB do the same thing - return an IDBRequest object with the result or error. The result for the open function is an instance of an IDBDatabase.

The open method accepts a second parameter, the version of the database. It allows you to update the schema of the database, i.e. creating or deleting object stores, if this one is not up-to-date. In that case, you implement the onupgradeneeded handler, with a versionchange transaction that allows you to deal with object stores - more on this later in Updating the version of the database, below. An example of opening of the database with the expected version indicated is as follows:

var request = indexedDB.open("MyTestDatabase", 3);

Generating handlers

The first thing you'll want to do with almost all of the requests you generate is to add success and error handlers:

request.onerror = function(event) {
  // Do something with request.errorCode!
};
request.onsuccess = function(event) {
  // Do something with request.result!
};

Which of the two functions, onsuccess() or onerror(), gets called? If everything succeeds, a success event (that is, a DOM event whose type property is set to "success") is fired with request as its target. Once it is fired, the onsuccess() function on request is triggered with the success event as its argument. Otherwise, if everything didn't succeed, an error event (that is, a DOM event whose type property is set to "error") is fired at request. This triggers the onerror() function with the error event as its argument.

The IndexedDB API is designed to minimize the need for error handling, so you're not likely to see many error events (at least, not once you're used to the API!). In the case of opening a database; however, there are some common conditions that generate error events. The most likely problem is that the user decided not to allow your web app access to create a database. One of the main design goals of IndexedDB is to allow large amounts of data to be stored for offline use. (To learn more about how much storage you can have for each browser, see Storage limits).  

Obviously, browsers do not want to allow some advertising network or malicious website to pollute your computer, so browsers prompt the user the first time any given web app attempts to open an IndexedDB storage. The user can choose to allow or deny access. Also, IndexedDB is completely disabled in the privacy modes of browsers (Private Browsing mode for Firefox and Incognito mode for Chrome). The whole point of private browsing is to leave no footprints, so attempting to open a database fails while in this mode.

Now, assuming that the user allowed your request to create a database, and you've received a success event to trigger the success callback; What next? The request here was generated with a call to indexedDB.open(), so request.result is an instance of IDBDatabase, and you definitely want to save that for later. Your code might look something like this:

var db;
var request = indexedDB.open("MyTestDatabase");
request.onerror = function(event) {
  alert("Why didn't you allow my web app to use IndexedDB?!");
};
request.onsuccess = function(event) {
  db = request.result;
};

Handling Errors

As mentioned above, error events bubble. Error events are targeted at the request that generated the error, then the event bubbles to the transaction, and then finally to the database object. If you want to avoid adding error handlers to every request, you can instead add a single error handler on the database object, like so:

db.onerror = function(event) {
  // Generic error handler for all errors targeted at this database's
  // requests!
  alert("Database error: " + event.target.errorCode);
};

One of the common possible errors when opening a database is VER_ERR. It indicates that the version of the database stored on the disk is greater than the version that you are trying to open. This is an error case that must always be handled by the error handler.

Updating the version of the database

To update the schema of the database, i.e. creating or deleting object stores, you implement the onupgradeneeded handler, with a versionchange transaction that allows you to deal with object stores.

// WebKit, as of 2012-02-22, does not yet implement this.
request.onupgradeneeded = function(event) { 
   // Update object stores and indices .... 
};

WebKit hasn't implemented the current version of the spec, and thus does not support the indexedDB.open(name, version).onupgradeneeded signature yet. For more information, see Chromium bug 108223. For more information on how to upgrade the version of the database in Webkit, see the IDBDatabase reference article.

Structuring the database

Now to structure the database. IndexedDB uses object stores rather than tables, and a single database can contain any number of object stores. Whenever a value is stored in an object store, it is associated with a key. There are several different ways that a key can be supplied depending on whether the object store uses a key path or a key generator.

The following table shows the different ways the keys are supplied. 

Key Path Key Generator Description
No No This object store can hold any kind of value, even primitive values like numbers and strings. You must supply a separate key argument whenever you want to add a new value.
Yes No This object store can only hold JavaScript objects. The objects must have a property with the same name as the key path.
No Yes This object store can hold any kind of value. The key is generated for you automatically, or you can supply a separate key argument if you want to use a specific key.
Yes Yes This object store can only hold JavaScript objects. Usually a key is generated and the value of the generated key is stored in the object in a property with the same name as the key path. However, if such a property already exists, the value of that property is used as key rather than generating a new key.

You can also create indices on any object store, provided the object store holds objects, not primitives. An index lets you look up the values stored in an object store using the value of a property of the stored object, rather than the object's key.

Additionally, indexes have the ability to enforce simple constraints on the stored data. By setting the unique flag when creating the index, the index ensures that no two objects are stored with both having the same value for the index's key path. So, for example, if you have an object store which holds a set of people, and you want to ensure that no two people have the same email address, you can use an index with the unique flag set to enforce this.

That may sound confusing, but this simple example should illustrate the concepts:

// This is what our customer data looks like.
const customerData = [
  { ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" },
  { ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" }
];
const dbName = "the_name";

var request = indexedDB.open(dbName, 2);

request.onerror = function(event) {
  // Handle errors.
};
request.onupgradeneeded = function(event) {
  var db = event.target.result;

  // Create an objectStore to hold information about our customers. We're
  // going to use "ssn" as our key path because it's guaranteed to be
  // unique.
  var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });

  // Create an index to search customers by name. We may have duplicates
  // so we can't use a unique index.
  objectStore.createIndex("name", "name", { unique: false });

  // Create an index to search customers by email. We want to ensure that
  // no two customers have the same email, so use a unique index.
  objectStore.createIndex("email", "email", { unique: true });

  // Store values in the newly created objectStore.
  for (var i in customerData) {
    objectStore.add(customerData[i]);
  }
};

As mentioned previously, onupgradeneeded is the only place where you can alter the structure of the database. In it, you can create and delete object stores and build and remove indices.

Object stores are created with a single call to createObjectStore(). The method takes a name of the store, and a parameter object. Even though the parameter object is optional, it is very important, because it lets you define important optional properties and refine the type of object store you want to create. In our case, we've asked for an object store named "customers" and  defined a keyPath that is the property that makes an individual object in the store unique. That property in this example is "ssn" since a social security number is guaranteed to be unique. "ssn" must be present on every object that is stored in the objectStore. 

We've also asked for an index named "name" that looks at the name property of the stored objects. As with createObjectStore(), createIndex() takes an optional options object that refines the type of  index that you want to create. Adding objects that don't have a name property still succeeds, but the object won't appear in the "name" index.

We can now retrieve the stored customer objects using their ssn from the object store directly, or using their name by using the index. To learn how this is done, see the section on using an index.

Adding and removing data

Before you can do anything with your new database, you need to start a transaction. Transactions come from the database object, and you have to specify which object stores you want the transaction to span. Also, you need to decide if you're going to make changes to the database or if you just need to read from it.  Although transactions have three modes (read-only, read/write, and versionchange), you're better off using a read-only transaction when you can, because they can run concurrently

Adding data to the database

If you've just created a database, then you probably want to write to it. Here's what that looks like:

var transaction = db.transaction(["customers"], IDBTransaction.readwrite);

The transaction() function takes three arguments (though two are optional) and returns a transaction object. The first argument is a list of object stores that the transaction will span. You can pass an empty array if you want the transaction to span all object stores. If you don't specify anything for the second argument, you get a read-only transaction. Since you want to write to it here you need to pass the readwrite flag.

Now that you have a transaction you need to understand its lifetime. Transactions are tied very closely to the event loop. If you make a transaction and return to the event loop without using it then the transaction will become inactive. The only way to keep the transaction active is to make a request on it. When the request is finished you'll get a DOM event and, assuming that the request succeeded, you'll have another opportunity to extend the transaction during that callback. If you return to the event loop without extending the transaction then it will become inactive, and so on. As long as there are pending requests the transaction remains active. Transaction lifetimes are really very simple but it might take a little time to get used to. A few more examples will help, too. If you start seeing TRANSACTION_INACTIVE_ERR error codes then you've messed something up.

Transactions can receive DOM events of three different types: error, abort, and complete. We've talked about the way that error events bubble, so a transaction  receives error events from any requests that are generated from it. A more subtle point here is that the default behavior of an error is to abort the transaction in which it occurred. Unless you handle the error by calling preventDefault() on the error event, the entire transaction is rolled back. This design forces you to  think about and handle errors, but you can always add a catchall error handler to the database if fine grained error handling is too cumbersome. If you don't handle an error event or if you call abort() on the transaction, then the transaction is rolled back and an abort event is fired on the transaction. Otherwise, after all pending requests have completed, you'll get a complete event. If you're doing lots of database operations, then tracking the transaction rather than individual requests can certainly aide your sanity.

Now that you have a transaction, you'll need to get the object store from it. Transactions only let you have an object store that you specified when creating the transaction. Then you can add all the data you need.

// Do something when all the data is added to the database.
transaction.oncomplete = function(event) {
  alert("All done!");
};

transaction.onerror = function(event) {
  // Don't forget to handle errors!
};

var objectStore = transaction.objectStore("customers");
for (var i in customerData) {
  var request = objectStore.add(customerData[i]);
  request.onsuccess = function(event) {
    // event.target.result == customerData[i].ssn
  };
}

The result of a request generated from a call to add() is the key of the value that was added. So in this case, it should equal the ssn property of the object that was added, since the object store uses the ssn property for the key path. Note that the add() function requires that no object already be in the database with the same key. If you're trying to modify an existing entry, or you don't care if one exists already, use the put() function.

Removing data from the database

Removing data is very similar:

var request = db.transaction(["customers"], IDBTransaction.readwrite)
                .objectStore("customers")
                .delete("444-44-4444");
request.onsuccess = function(event) {
  // It's gone!
};

Getting data from the database

Now that the database has some info in it, you can retrieve it in several ways. First, the simple get(). You need to provide the key to retrieve the value, like so:

var transaction = db.transaction(["customers"]);
var objectStore = transaction.objectStore("customers");
var request = objectStore.get("444-44-4444");
request.onerror = function(event) {
  // Handle errors!
};
request.onsuccess = function(event) {
  // Do something with the request.result!
  alert("Name for SSN 444-44-4444 is " + request.result.name);
};

That's a lot of code for a "simple" retrieval. Here's how you can shorten it up a bit, assuming that you handle errors at the database level:

db.transaction("customers").objectStore("customers").get("444-44-4444").onsuccess = function(event) {
  alert("Name for SSN 444-44-4444 is " + event.target.result.name);
};

See how this works? Since there's only one object store, you can avoid passing a list of object stores you need in your transaction and just pass the name as a string. Also, you're only reading from the database, so you don't need a readwrite transaction. Calling transaction() with no mode specified gives you a readonly transaction. Another subtlety here is that you don't actually save the request object to a variable. Since the DOM event has the request as its target you can use the event to get to the result property. Easy, right?!

Using a cursor

Using get() requires that you know which key you want to retrieve. If you want to step through all the values in your object store, then you can use a cursor. Here's what it looks like:

var objectStore = db.transaction("customers").objectStore("customers");

objectStore.openCursor().onsuccess = function(event) {
  var cursor = event.target.result;
  if (cursor) {
    alert("Name for SSN " + cursor.key + " is " + cursor.value.name);
    cursor.continue();
  }
  else {
    alert("No more entries!");
  }
};

The openCursor() function takes several arguments. First, you can limit the range of items that are retrieved by using a key range object that we'll get to in a minute. Second, you can specify the direction that you want to iterate. In the above example, we're iterating over all objects in ascending order. The success callback for cursors is a little special. The cursor object itself is the result of the request (above we're using the shorthand, so it's event.target.result). Then the actual key and value can be found on the key and value properties of the cursor object. If you want to keep going, then you have to call continue() on the cursor. When you've reached the end of the data (or if there were no entries that matched your openCursor() request) you still get a success callback, but the result property is undefined.

One common pattern with cursors is to retrieve all objects in an object store and add them to an array, like this:

var customers = [];

objectStore.openCursor().onsuccess = function(event) {
  var cursor = event.target.result;
  if (cursor) {
    customers.push(cursor.value);
    cursor.continue();
  }
  else {
    alert("Got all customers: " + customers);
  }
};
Warning: The following function is not part of the IndexedDB standard!

Mozilla has also implemented getAll() to handle this case. It isn't part of the IndexedDB standard, so it may disappear in the future. We've included it because we think it's useful. The following code does precisely the same thing as above:

objectStore.getAll().onsuccess = function(event) {
  alert("Got all customers: " + customers);
};

There is a performance cost associated with looking at the value property of a cursor, because the object is created lazily. When you use getAll(), Gecko must create all the objects at once. If you're just interested in looking at each of the keys, for instance, it is much more efficient to use a cursor than to use getAll(). If you're trying to get an array of all the objects in an object store, though, use getAll().

Using an index

Storing customer data using the SSN as a key is logical since the SSN uniquely identifies an individual. (Whether this is a good idea for privacy is a different question, outside the scope of this article.) If you need to look up a customer by name, however, you'll need to iterate over every SSN in the database until you find the right one. Searching in this fashion would be very slow, so instead you can use an index.

var index = objectStore.index("name");
index.get("Donna").onsuccess = function(event) {
  alert("Donna's SSN is " + event.target.result.ssn);
};

The "name" cursor isn't unique, so there could be more than one entry with the name set to "Donna". In that case you always get the one with the lowest key value.

If you need to access all the entries with a given name you can use a cursor. You can open two different types of cursors on indexes. A normal cursor maps the index property to the object in the object store. A key cursor maps the index property to the key used to store the object in the object store. The differences are illustrated here:

index.openCursor().onsuccess = function(event) {
  var cursor = event.target.result;
  if (cursor) {
    // cursor.key is a name, like "Bill", and cursor.value is the whole object.
    alert("Name: " + cursor.key + ", SSN: " + cursor.value.ssn + ", email: " + cursor.value.email);
    cursor.continue();
  }
};

index.openKeyCursor().onsuccess = function(event) {
  var cursor = event.target.result;
  if (cursor) {
    // cursor.key is a name, like "Bill", and cursor.value is the SSN.
    // No way to directly get the rest of the stored object.
    alert("Name: " + cursor.key + ", "SSN: " + cursor.value);
    cursor.continue();
  }
};

Specifying the range and direction of cursors

If you would like to limit the range of values you see in a cursor, you can use a key range object and pass it as the first argument to openCursor() or openKeyCursor(). You can make a key range that only allows a single key, or one the has a lower or upper bound, or one that has both a lower and upper bound. The bound may be "closed" (i.e., the key range includes the given value) or "open" (i.e., the key range does not include the given value). Here's how it works:

// Only match "Donna"
var singleKeyRange = IDBKeyRange.only("Donna");

// Match anything past "Bill", including "Bill"
var lowerBoundKeyRange = IDBKeyRange.lowerBound("Bill");

// Match anything past "Bill", but don't include "Bill"
var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true);

// Match anything up to, but not including, "Donna"
var upperBoundOpenKeyRange = IDBKeyRange.upperBound("Donna", true);

//Match anything between "Bill" and "Donna", but not including "Donna"
var boundKeyRange = IDBKeyRange.bound("Bill", "Donna", false, true);

index.openCursor(boundKeyRange).onsuccess = function(event) {
  var cursor = event.target.result;
  if (cursor) {
    // Do something with the matches.
    cursor.continue();
  }
};

Sometimes you may want to iterate in descending order rather than in ascending order (the default direction for all cursors). Switching direction is accomplished by passing prev to the openCursor() function:

objectStore.openCursor(null, IDBCursor.prev).onsuccess = function(event) {
  var cursor = event.target.result;
  if (cursor) {
    // Do something with the entries.
    cursor.continue();
  }
};

Since the "name" index isn't unique, there might be multiple entries where name is the same. Note that such a situation cannot occur with object stores since the key must always be unique. If you wish to filter out duplicates during cursor iteration over indexes, you can pass nextunique (or prevunique if you're going backwards) as the direction parameter. When nextunique or prevunique is used, the entry with the lowest key is always the one returned.

index.openKeyCursor(null, IDBCursor.nextunique).onsuccess = function(event) {
  var cursor = event.target.result;
  if (cursor) {
    // Do something with the entries.
    cursor.continue();
  }
};

Version changes while a web app is open in another tab

When your web app changes in such a way that a version change is required for your database, you need to consider what happens if the user has the old version of your app open in one tab and then loads the new version of your app in another. When you call open() with a greater version than the actual version of the database, all other open databases must explicitly acknowledge the request before you can start making changes to the database. Here's how it works:

var openReq = mozIndexedDB.open("MyTestDatabase", 2);

openReq.onblocked = function(event) {
  // If some other tab is loaded with the database, then it needs to be closed
  // before we can proceed.
  alert("Please close all other tabs with this site open!");
};
  
openReq.onupgradeneeded = function(event) {
  // All other databases have been closed. Set everything up.
  db.createObjectStore(/* ... */);
  useDatabase(db);
}  
  
openReq.onsuccess = function(event) {
  var db = event.target.result;
  useDatabase(db);
  return;
}

function useDatabase(db) {
  // Make sure to add a handler to be notified if another page requests a version
  // change. We must close the database. This allows the other page to upgrade the database.
  // If you don't do this then the upgrade won't happen until the user close the tab.
  db.onversionchange = function(event) {
    db.close();
    alert("A new version of this page is ready. Please reload!");
  };

  // Do stuff with the database.
}

Security

IndexedDB uses the same-origin principle, which means that it ties the store to the origin of the site that creates it (typically, this is the site domain or subdomain), so it cannot be accessed by any other origin.

It's important to note that IndexedDB doesn't work for content loaded into a frame from another site (either {{ HTMLElement("frame") }} or {{ HTMLElement("iframe") }}. This is a security measure. Details as to why this matters are forthcoming. See {{ bug(595307) }}.

Next step

If you want to start tinkering with the API, jump in to the reference documentation and checking out the different methods.

See also

Reference

Tutorials

Related articles

Firefox

修订版来源

<p>IndexedDB是使用浏览器将数据存储到本地的方式,相当于一个key-value数据库. 它可以使得web应用程序大大的提升, 使得你的web程序可以工作在离线.&nbsp;</p>
<p>IndexedDB 包含一组<a href="/en/IndexedDB#Synchronous_API" title="https://developer.mozilla.org/en/IndexedDB#Synchronous_API">synchronous(同步)</a> 和一组 <a href="/en/IndexedDB#Asynchronous_API" title="https://developer.mozilla.org/en/IndexedDB#Asynchronous_API">asynchronous(异步)</a> API. 同步API是设计为和<a href="/En/DOM/Using_web_workers" title="https://developer.mozilla.org/En/Using_web_workers">WebWorkers一起使用的</a>, 并且现在没有被任何浏览器支持. 当然啦, WebWorkers支持异步API. 大多数情况下我们将使用异步api, 这篇文章是说如何使用异步api的. &nbsp;</p>
<h2 id="About_this_document">关于这篇文档</h2>
<p>这篇文档说明indexedDB的基本用法。如果你对key-value型数据库不熟,请你先阅读 <a href="/en/IndexedDB/Basic_Concepts_Behind_IndexedDB" title="en/IndexedDB/Basic Concepts Behind IndexedDB">Basic Concepts About IndexedDB</a>.</p>
<p>For the reference documentation on the IndexedDB API, see the <a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB</a> article and its subpages, which document the types of objects used by IndexedDB, as well as the methods of both the synchronous and asynchronous APIs.&nbsp;</p>
<h2 id="pattern" name="pattern">Basic pattern</h2>
<p>The basic pattern that IndexedDB encourages is the following:</p>
<ol>
  <li>Open a database and start a transaction.</li>
  <li>Create an object store.&nbsp;</li>
  <li>Make a request to do some database operation, like adding or retrieving data.</li>
  <li>
    <div>
      Wait for the operation to complete by listening to the right kind of DOM&nbsp;event.</div>
  </li>
  <li>
    <div>
      Do something with the results (which can be found on the request object).</div>
  </li>
</ol>
<p>OK, so, now with these big concepts under our belts, we can get to more concrete stuff.</p>
<h2 id="open" name="open">Creating and structuring the store</h2>
<p>Because the specification is still evolving, current implementations of IndexedDB hide under browser prefixes. Browser vendors may have different implementations of the standard IndexedDB&nbsp;API until the specification has solidified. But once concensus is reached on the standard, the vendors implement it without the prefix tags. &nbsp;Gecko-based browsers use the&nbsp;<code>moz</code> prefix, while WebKit-based browsers use the <code>webkit</code> prefix. In the sample code, just replace the methods with the appropriate prefix (for example, if you are creating an app on Google Chrome, use <code>webkitIndexedDB.open()</code> instead of <code>mozIndexedDB.open()</code>) or just use the snippet of code in the next section.</p>
<h3 id="Opening_a_database">Opening a database</h3>
<p>Start the whole process like this:</p>
<pre class="brush: js">
// This will improve our code to be more readable and shorter
window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
// Now we can open our database
var request = window.indexedDB.open("MyTestDatabase");
</pre>
<p>See that? Opening a database is just like any other operation — you have to "request" it.</p>
<p>The<code>&nbsp;IndexedDB</code><code> </code>object has just a single method, <code>open()</code>, which, when called, opens the database called "MyTestDatabase." All IndexedDB databases are stored in the same origin, so <code>mozilla.com</code> might have a database named "binky" and <code>mozilla.org</code> might have a totally distinct database named "binky". If the database does not exist, then it is created; if the database already exists, then it is simply opened.</p>
<p>The open request doesn't open the database or start the transaction right away. &nbsp;The call to the&nbsp;<code>open()</code> function returns an&nbsp;<code>IDBRequest</code> object with a result (success) or error value that you handle as an event. Most other asynchronous functions in IndexedDB do the same thing - return&nbsp;an&nbsp;<code style="font-size: 14px; color: rgb(51, 51, 51); ">IDBRequest</code>&nbsp;object with the result or error. The result for the open function is an instance of an&nbsp;<code style="font-size: 14px; color: rgb(51, 51, 51); ">IDBDatabase.</code></p>
<p>The open method accepts a second parameter, the version of the database. It allows you to update the schema of the database, i.e. creating or deleting object stores, if this one is not up-to-date. In that case, you implement the <code>onupgradeneeded</code> handler, with a <code>versionchange</code> transaction that allows you to deal with object stores - more on this later in <a href="#Updating_the_version_of_the_database">Updating the version of the database</a>, below.&nbsp;An example of opening of the database with the expected version indicated is as follows:</p>
<pre class="eval deki-transform">
var request = indexedDB.open("MyTestDatabase", 3);
</pre>
<h4 id="Generating_handlers">Generating handlers</h4>
<p>The first thing you'll want to do with almost all of the requests you generate is to add success and error handlers:</p>
<pre class="brush: js">
request.onerror = function(event) {
  // Do something with request.errorCode!
};
request.onsuccess = function(event) {
  // Do something with request.result!
};</pre>
<p>Which of the two functions, <code>onsuccess()</code> or <code>onerror()</code>, gets called? If everything succeeds, a success event (that is, a DOM&nbsp;event whose <code>type</code> property is set to <code>"success"</code>) is fired with <code>request</code> as its <code>target</code>. Once it is fired, the <code>onsuccess()</code> function on <code>request</code> is triggered with the success event as its argument. Otherwise, if everything didn't succeed, an error event (that is, a DOM event whose <code>type</code> property is set to <code>"error"</code>) is fired at <code>request</code>. This triggers the <code><code>onerror()</code></code> function with the error event as its argument.</p>
<p>The IndexedDB API is designed to minimize the need for error handling, so you're not likely to see many error events (at least, not once you're used to the API!). In the case of opening a database; however, there are some common conditions that generate error events. The most likely problem is that the user decided not to allow your web app access to create a database. One of the main design goals of IndexedDB is to allow large amounts of data to be stored for offline use. (To learn more about how much storage you can have for each browser, see <a href="/en/IndexedDB#Storage_limits" title="https://developer.mozilla.org/en/IndexedDB#Storage_limits">Storage limits</a>). &nbsp;</p>
<p>Obviously, browsers do not want to allow some advertising network or malicious website to pollute your computer, so browsers prompt the user the first time any given web app attempts to open an IndexedDB storage. The user can choose to allow or deny access. Also, IndexedDB is completely disabled in the privacy modes of browsers (Private Browsing mode for Firefox and Incognito mode for Chrome). The whole point of private browsing is to leave no footprints, so attempting to open a database fails while in this mode.</p>
<p>Now, assuming that the user allowed your request to create a database, and you've received a success event to trigger the success callback; What next? The request here was generated with a call to <code>indexedDB.open()</code>, so <code>request.result</code> is an instance of <code>IDBDatabase</code>, and you definitely want to save that for later. Your code might look something like this:</p>
<pre class="brush: js">
var db;
var request = indexedDB.open("MyTestDatabase");
request.onerror = function(event) {
  alert("Why didn't you allow my web app to use IndexedDB?!");
};
request.onsuccess = function(event) {
  db = request.result;
};
</pre>
<h4 id="Handling_Errors">Handling Errors</h4>
<p>As mentioned above, error events bubble. Error events are targeted at the request that generated the error, then the event bubbles to the transaction, and then finally to the database object. If you want to avoid adding error handlers to every request, you can instead add a single error handler on the database object, like so:</p>
<pre class="brush: js">
db.onerror = function(event) {
  // Generic error handler for all errors targeted at this database's
  // requests!
  alert("Database error: " + event.target.errorCode);
};
</pre>
<p>One of the common possible errors when opening a database is <code>VER_ERR</code>. It indicates that the version of the database stored on the disk is <em>greater</em> than the version that you are trying to open. This is an error case that must always be handled by the error handler.</p>
<h3 id="Updating_the_version_of_the_database">Updating the version of the database</h3>
<p><a name="Updating_the_version_of_the_database"></a>T<span style="line-height: 21px; ">o update the schema of the database, i.e. creating or deleting object stores, you implement the&nbsp;</span><code style="font-size: 14px; color: rgb(51, 51, 51); ">onupgradeneeded</code><span style="line-height: 21px; ">&nbsp;handler, with a&nbsp;</span><code style="font-size: 14px; color: rgb(51, 51, 51); ">versionchange</code><span style="line-height: 21px; ">&nbsp;transaction that allows you to deal with object stores.</span></p>
<pre class="brush:js;">
// WebKit, as of 2012-02-22, does not yet implement this.
request.onupgradeneeded = function(event) { 
   // Update object stores and indices .... 
};</pre>
<p>WebKit hasn't implemented the current version of the spec, and thus does not support the <code>indexedDB.open(name, version).onupgradeneeded</code>&nbsp;signature yet. For more information, see <a class="external" href="http://code.google.com/p/chromium/issues/detail?id=108223" title="http://code.google.com/p/chromium/issues/detail?id=108223">Chromium bug 108223</a>. For more information on how to upgrade the version of the database in Webkit, see the <a href="/en/IndexedDB/IDBDatabase#setVersion()_.0A.0ADeprecated" title="https://developer.mozilla.org/en/IndexedDB/IDBDatabase#setVersion()_.0A.0ADeprecated">IDBDatabase reference article</a>.</p>
<h3 id="Structuring_the_database">Structuring the database</h3>
<p>Now to structure the database. IndexedDB&nbsp;uses object stores rather than tables, and a single database can contain any number of object stores. Whenever a value is stored in an object store, it is associated with a key. There are several different ways that a key can be supplied depending on whether the object store uses a <a href="/en/IndexedDB#gloss_key_path" title="https://developer.mozilla.org/en/IndexedDB#gloss_key_path">key path</a> or a <a href="/en/IndexedDB#gloss_key_generator" title="en/IndexedDB#gloss key generator">key generator</a>.</p>
<p>The following table shows the different ways the keys are supplied.&nbsp;</p>
<table border="1" cellpadding="1" cellspacing="1" class="standard-table" style="">
  <thead>
    <tr>
      <th scope="col">Key Path</th>
      <th scope="col">Key Generator</th>
      <th scope="col">Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>No</td>
      <td>No</td>
      <td>This object store can hold any kind of value, even primitive values like numbers and strings. You must supply a separate key argument whenever you want to add a new value.</td>
    </tr>
    <tr>
      <td>Yes</td>
      <td>No</td>
      <td>This object store can only hold JavaScript objects. The objects must have a property with the same name as the key path.</td>
    </tr>
    <tr>
      <td>No</td>
      <td>Yes</td>
      <td>This object store can hold any kind of value. The key is generated for you automatically, or you can supply a separate key argument if you want to use a specific key.</td>
    </tr>
    <tr>
      <td>Yes</td>
      <td>Yes</td>
      <td>This object store can only hold JavaScript objects. Usually a key is generated and the value of the generated key is stored in the object in a property with the same name as the key path. However, if such a property already exists, the value of that property is used as key rather than generating a new key.</td>
    </tr>
  </tbody>
</table>
<p>You can also create indices on any object store, provided the object store holds objects, not primitives. An index lets you look up the values stored in an object store using the value of a property of the stored object, rather than the object's key.</p>
<p>Additionally, indexes have the ability to enforce simple constraints on the stored data. By setting the unique flag when creating the index, the index ensures that no two objects are stored with both having the same value for the index's key path. So, for example, if you have an object store which holds a set of people, and you want to ensure that no two people have the same email address, you can use an index with the unique flag set to enforce this.</p>
<p>That may sound confusing, but this simple example should illustrate the concepts:</p>
<pre class="brush: js">
// This is what our customer data looks like.
const customerData = [
  { ssn: "444-44-4444", name: "Bill", age: 35, email: "bill@company.com" },
  { ssn: "555-55-5555", name: "Donna", age: 32, email: "donna@home.org" }
];
const dbName = "the_name";

var request = indexedDB.open(dbName, 2);

request.onerror = function(event) {
  // Handle errors.
};
request.onupgradeneeded = function(event) {
  var db = event.target.result;

  // Create an objectStore to hold information about our customers. We're
  // going to use "ssn" as our key path because it's guaranteed to be
  // unique.
  var objectStore = db.createObjectStore("customers", { keyPath: "ssn" });

  // Create an index to search customers by name. We may have duplicates
  // so we can't use a unique index.
  objectStore.createIndex("name", "name", { unique: false });

  // Create an index to search customers by email. We want to ensure that
  // no two customers have the same email, so use a unique index.
  objectStore.createIndex("email", "email", { unique: true });

  // Store values in the newly created objectStore.
  for (var i in customerData) {
    objectStore.add(customerData[i]);
  }
};
</pre>
<p>As mentioned previously, <code>onupgradeneeded</code> is the only place where you can alter the structure of the database. In it, you can create and delete object stores and build and remove indices.</p>
<div>
  Object stores are created with a single call to <code>createObjectStore()</code>. The method takes a name of the store, and a parameter object. Even though the parameter object is optional, it is very important, because it lets you define important optional properties and refine the type of object store you want to create. In our case, we've asked for an object store named "customers" and&nbsp; defined a keyPath that is the property that makes an individual object in the store unique. That property in this example is "ssn" since a social security number is guaranteed to be unique. "ssn" must be present on every object that is stored in the objectStore.&nbsp;</div>
<p>We've also asked for an index named "name" that looks at the <code>name</code> property of the stored objects.&nbsp;As with <code>createObjectStore()</code>, <code>createIndex()</code> takes an optional <code>options</code> object that refines the type of&nbsp; index that you want to create. Adding objects that don't have a <code>name</code> property still succeeds, but the object won't appear in the "name" index.</p>
<p>We can now retrieve the stored customer objects using their <code>ssn</code> from the object store directly, or using their name by using the index. To learn how this is done, see the section on <a href="/en/IndexedDB/Using_IndexedDB#Using_an_index" title="Using IndexedDB#Using an index">using an index</a>.</p>
<h2 id="Adding_and_removing_data">Adding and removing data</h2>
<p>Before you can do anything with your new database, you need to start a transaction. Transactions come from the database object, and you have to specify which object stores you want the transaction to span. Also, you need to decide if you're going to make changes to the database or if you just need to read from it.&nbsp; Although transactions have three modes (read-only, read/write, and versionchange), you're better off using a read-only transaction when you can, because they can run concurrently</p>
<h3 id="Adding_data_to_the_database">Adding data to the database</h3>
<p>If you've just created a database, then you probably want to write to it. Here's what that looks like:</p>
<pre class="brush: js">
var transaction = db.transaction(["customers"], IDBTransaction.readwrite);</pre>
<p>The <code>transaction()</code> function takes three arguments (though two are optional) and returns a transaction object. The first argument is a list of object stores that the transaction will span. You can pass an empty array if you want the transaction to span all object stores. If you don't specify anything for the second argument, you get a read-only transaction. Since you want to write to it here you need to pass the <code>readwrite</code>&nbsp;flag.</p>
<p>Now that you have a transaction you need to understand its lifetime. Transactions are tied very closely to the event loop. If you make a transaction and return to the event loop without using it then the transaction will become inactive. The only way to keep the transaction active is to make a request on it. When the request is finished you'll get a DOM&nbsp;event and, assuming that the request succeeded, you'll have another opportunity to extend the transaction during that callback. If you return to the event loop without extending the transaction then it will become inactive, and so on. As long as there are pending requests the transaction remains active. Transaction lifetimes are really very simple but it might take a little time to get used to. A few more examples will help, too. If you start seeing <code>TRANSACTION_INACTIVE_ERR</code> error codes then you've messed something up.</p>
<p>Transactions can receive DOM&nbsp;events of three different types: <code>error</code>, <code>abort</code>, and <code>complete</code>. We've talked about the way that <code>error</code> events bubble, so a transaction&nbsp; receives error events from any requests that are generated from it. A more subtle point here is that the default behavior of an error is to abort the transaction in which it occurred. Unless you handle the error by calling <code>preventDefault()</code> on the error event, the entire transaction is rolled back. This design forces you to&nbsp; think about and handle errors, but you can always add a catchall error handler to the database if fine grained error handling is too cumbersome. If you don't handle an error event or if you call <code>abort()</code> on the transaction, then the transaction is rolled back and an <code>abort</code> event is fired on the transaction. Otherwise, after all pending requests have completed, you'll get a <code>complete</code> event. If you're doing lots of database operations, then tracking the transaction rather than individual requests can certainly aide your sanity.</p>
<p>Now that you have a transaction, you'll need to get the object store from it. Transactions only let you have an object store that you specified when creating the transaction. Then you can add all the data you need.</p>
<pre class="brush: js">
// Do something when all the data is added to the database.
transaction.oncomplete = function(event) {
  alert("All done!");
};

transaction.onerror = function(event) {
  // Don't forget to handle errors!
};

var objectStore = transaction.objectStore("customers");
for (var i in customerData) {
  var request = objectStore.add(customerData[i]);
  request.onsuccess = function(event) {
    // event.target.result == customerData[i].ssn
  };
}</pre>
<p>The <code>result</code> of a request generated from a call to <code>add() </code>is the key of the value that was added. So in this case, it should equal the <code>ssn</code> property of the object that was added, since the object store uses the <code>ssn</code> property for the key path. Note that the <code>add()</code> function requires that no object already be in the database with the same key. If you're trying to modify an existing entry, or you don't care if one exists already, use the <code>put()</code> function.</p>
<h2 id="Removing_data_from_the_database">Removing data from the database</h2>
<p>Removing data is very similar:</p>
<pre class="brush: js">
var request = db.transaction(["customers"], IDBTransaction.readwrite)
                .objectStore("customers")
                .delete("444-44-4444");
request.onsuccess = function(event) {
  // It's gone!
};</pre>
<h2 id="Getting_data_from_the_database">Getting data from the database</h2>
<p>Now that the database has some info in it, you can retrieve it in several ways. First, the simple <code>get()</code>.&nbsp;You need to provide the key to retrieve the value, like so:</p>
<pre class="brush: js">
var transaction = db.transaction(["customers"]);
var objectStore = transaction.objectStore("customers");
var request = objectStore.get("444-44-4444");
request.onerror = function(event) {
  // Handle errors!
};
request.onsuccess = function(event) {
  // Do something with the request.result!
  alert("Name for SSN 444-44-4444 is " + request.result.name);
};</pre>
<p>That's a lot of code for a "simple" retrieval. Here's how you can shorten it up a bit, assuming that you handle errors at the database level:</p>
<pre class="brush: js">
db.transaction("customers").objectStore("customers").get("444-44-4444").onsuccess = function(event) {
  alert("Name for SSN 444-44-4444 is " + event.target.result.name);
};</pre>
<p>See how this works? Since there's only one object store, you can avoid passing a list of object stores you need in your transaction and just pass the name as a string. Also, you're only reading from the database, so you don't need a <code>readwrite</code> transaction. Calling <code>transaction()</code> with no mode specified gives you a <code>readonly</code> transaction. Another subtlety here is that you don't actually save the request object to a variable. Since the DOM event has the request as its target you can use the event to get to the <code>result</code> property.&nbsp;Easy, right?!</p>
<h2 id="Using_a_cursor">Using a cursor</h2>
<p>Using <code>get()</code> requires that you know which key you want to retrieve. If you want to step through all the values in your object store, then you can use a cursor. Here's what it looks like:</p>
<pre class="brush: js">
var objectStore = db.transaction("customers").objectStore("customers");

objectStore.openCursor().onsuccess = function(event) {
  var cursor = event.target.result;
  if (cursor) {
    alert("Name for SSN " + cursor.key + " is " + cursor.value.name);
    cursor.continue();
  }
  else {
    alert("No more entries!");
  }
};</pre>
<p>The<code> openCursor()</code> function takes several arguments. First, you can limit the range of items that are retrieved by using a key range object that we'll get to in a minute. Second, you can specify the direction that you want to iterate. In the above example, we're iterating over all objects in ascending order. The success callback for cursors is a little special. The cursor object itself is the <code>result</code> of the request (above we're using the shorthand, so it's <code>event.target.result</code>). Then the actual key and value can be found on the <code>key</code> and <code>value</code> properties of the cursor object. If you want to keep going, then you have to call <code>continue()</code> on the cursor. When you've reached the end of the data (or if there were no entries that matched your <code>openCursor()</code> request) you still get a success callback, but the <code>result</code> property is <code>undefined</code>.</p>
<p>One common pattern with cursors is to retrieve all objects in an object store and add them to an array, like this:</p>
<pre class="brush: js">
var customers = [];

objectStore.openCursor().onsuccess = function(event) {
  var cursor = event.target.result;
  if (cursor) {
    customers.push(cursor.value);
    cursor.continue();
  }
  else {
    alert("Got all customers: " + customers);
  }
};</pre>
<div class="warning">
  <strong>Warning:</strong>&nbsp;The following function is not part of the IndexedDB standard!</div>
<p>Mozilla has also implemented <code>getAll()</code> to handle this case. It isn't part of the IndexedDB standard, so it may disappear in the future. We've included it because we think it's useful. The following code does precisely the same thing as above:</p>
<pre class="brush: js">
objectStore.getAll().onsuccess = function(event) {
  alert("Got all customers: " + customers);
};</pre>
<p>There is a performance cost associated with looking at the <code>value</code> property of a cursor, because the object is created lazily. When you use <code>getAll()</code>, Gecko must create all the objects at once. If you're just interested in looking at each of the keys, for instance, it is much more efficient to use a cursor than to use <code>getAll()</code>. If you're trying to get an array of all the objects in an object store, though, use <code>getAll()</code>.</p>
<h3 id="Using_an_index">Using an index</h3>
<p>Storing customer data using the SSN&nbsp;as a key is logical since the SSN&nbsp;uniquely identifies an individual. (Whether this is a good idea for privacy is a different question, outside the scope of this article.) If you need to look up a customer by name, however, you'll need to iterate over every SSN&nbsp;in the database until you find the right one. Searching in this fashion would be very slow, so instead you can use an index.</p>
<pre class="brush: js">
var index = objectStore.index("name");
index.get("Donna").onsuccess = function(event) {
  alert("Donna's SSN is " + event.target.result.ssn);
};</pre>
<p>The "name" cursor isn't unique, so there could be more than one entry with the <code>name</code> set to <code>"Donna"</code>. In that case you always get the one with the lowest key value.</p>
<p>If you need to access all the entries with a given <code>name</code> you can use a cursor. You can open two different types of cursors on indexes. A normal cursor maps the index property to the object in the object store. A key cursor maps the index property to the key used to store the object in the object store. The differences are illustrated here:</p>
<pre class="brush: js">
index.openCursor().onsuccess = function(event) {
  var cursor = event.target.result;
  if (cursor) {
    // cursor.key is a name, like "Bill", and cursor.value is the whole object.
    alert("Name: " + cursor.key + ", SSN: " + cursor.value.ssn + ", email: " +&nbsp;cursor.value.email);
    cursor.continue();
  }
};

index.openKeyCursor().onsuccess = function(event) {
  var cursor = event.target.result;
  if (cursor) {
    // cursor.key is a name, like "Bill", and cursor.value is the SSN.
    // No way to directly get the rest of the stored object.
    alert("Name: " + cursor.key + ", "SSN: " + cursor.value);
    cursor.continue();
  }
};</pre>
<h3 id="Specifying_the_range_and_direction_of_cursors">Specifying the range and direction of cursors</h3>
<p>If you would like to limit the range of values you see in a cursor, you can use a key range object and pass it as the first argument to <code>openCursor()</code> or <code>openKeyCursor()</code>. You can make a key range that only allows a single key, or one the has a lower or upper bound, or one that has both a lower and upper bound. The bound may be "closed" (i.e., the key range includes the given value) or "open" (i.e., the key range does not include the given value). Here's how it works:</p>
<pre class="brush: js">
// Only match "Donna"
var singleKeyRange = IDBKeyRange.only("Donna");

// Match anything past "Bill", including "Bill"
var lowerBoundKeyRange = IDBKeyRange.lowerBound("Bill");

// Match anything past "Bill", but don't include "Bill"
var lowerBoundOpenKeyRange = IDBKeyRange.lowerBound("Bill", true);

// Match anything up to, but not including, "Donna"
var upperBoundOpenKeyRange = IDBKeyRange.upperBound("Donna", true);

//Match anything between "Bill" and "Donna", but not including "Donna"
var boundKeyRange = IDBKeyRange.bound("Bill", "Donna", false, true);

index.openCursor(boundKeyRange).onsuccess = function(event) {
  var cursor = event.target.result;
  if (cursor) {
    // Do something with the matches.
    cursor.continue();
  }
};</pre>
<p>Sometimes you may want to iterate in descending order rather than in ascending order (the default direction for all cursors). Switching direction is accomplished by passing <code>prev</code> to the <code>openCursor()</code> function:</p>
<pre class="brush: js">
objectStore.openCursor(null, IDBCursor.prev).onsuccess = function(event) {
  var cursor = event.target.result;
  if (cursor) {
    // Do something with the entries.
    cursor.continue();
  }
};</pre>
<p>Since the "name" index isn't unique, there might be multiple entries where <code>name</code> is the same. Note that such a situation cannot occur with object stores since the key must always be unique. If you wish to filter out duplicates during cursor iteration over indexes, you can pass <code>nextunique</code>&nbsp;(or <code>prevunique</code>&nbsp;if you're going backwards) as the direction parameter. When <code>nextunique</code> or <code>prevunique</code>&nbsp;is used, the entry with the lowest key is always the one returned.</p>
<pre class="brush: js">
index.openKeyCursor(null, IDBCursor.nextunique).onsuccess = function(event) {
  var cursor = event.target.result;
  if (cursor) {
    // Do something with the entries.
    cursor.continue();
  }
};</pre>
<h2 id="Version_changes_while_a_web_app_is_open_in_another_tab">Version changes while a web app is open in another tab</h2>
<p>When your web app changes in such a way that a version change is required for your database, you need to consider what happens if the user has the old version of your app open in one tab and then loads the new version of your app in another. When you call <code>open()</code> with a greater version than the actual version of the database, all other open databases must explicitly acknowledge the request before you can start making changes to the database. Here's how it works:</p>
<pre class="brush: js">
var openReq = mozIndexedDB.open("MyTestDatabase", 2);

openReq.onblocked = function(event) {
  // If some other tab is loaded with the database, then it needs to be closed
  // before we can proceed.
  alert("Please close all other tabs with this site open!");
};
  
openReq.onupgradeneeded = function(event) {
  // All other databases have been closed. Set everything up.
  db.createObjectStore(/* ... */);
  useDatabase(db);
}  
  
openReq.onsuccess = function(event) {
  var db = event.target.result;
  useDatabase(db);
  return;
}

function useDatabase(db) {
  // Make sure to add a handler to be notified if another page requests a version
  // change. We must close the database. This allows the other page to upgrade the database.
  // If you don't do this then the upgrade won't happen until the user close the tab.
 &nbsp;db.onversionchange = function(event) {
    db.close();
    alert("A new version of this page is ready. Please reload!");
  };

  // Do stuff with the database.
}
</pre>
<h2 id="Security">Security</h2>
<p>IndexedDB uses the same-origin principle, which means that it ties the store to the origin of the site that creates it (typically, this is the site domain or subdomain), so it cannot be accessed by any other origin.</p>
<p>It's important to note that IndexedDB&nbsp;doesn't work for content loaded into a frame from another site (either {{ HTMLElement("frame") }}&nbsp;or {{ HTMLElement("iframe") }}. This is a security measure. Details as to why this matters are forthcoming. See {{ bug(595307) }}.</p>
<h2 id="Next_step">Next step</h2>
<p>If you want to start tinkering with the API, jump in to the <a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">reference documentation</a> and checking out the different methods.</p>
<h2 id="See_also">See also</h2>
<p>Reference</p>
<ul>
  <li><a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">IndexedDB&nbsp;API&nbsp;Reference</a></li>
  <li><a class="external" href="http://www.w3.org/TR/IndexedDB/" title="http://www.w3.org/TR/IndexedDB/">Indexed Database API Specification</a></li>
</ul>
<p>Tutorials</p>
<ul>
  <li><a class="external" href="http://www.html5rocks.com/tutorials/indexeddb/todo/" title="http://www.html5rocks.com/tutorials/indexeddb/todo/">A simple TODO&nbsp;list using HTML5 IndexedDB</a><span class="external">. {{Note("This tutorial is based on an old version of the specification and does not work on up-to-date browsers - it still uses the removed <code>setVersion()</code> method.") }}</span></li>
  <li><a href="http://www.html5rocks.com/en/tutorials/indexeddb/uidatabinding/" title="http://www.html5rocks.com/en/tutorials/indexeddb/uidatabinding/">Databinding UI Elements with IndexedDB</a></li>
</ul>
<p>Related articles</p>
<ul>
  <li><a class="external" href="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx" title="http://msdn.microsoft.com/en-us/scriptjunkie/gg679063.aspx">IndexedDB&nbsp;— The Store in Your Browser</a></li>
</ul>
<p>Firefox</p>
<ul>
  <li>Mozilla <a class="link-https" href="https://mxr.mozilla.org/mozilla-central/find?text=&amp;string=dom%2FindexedDB%2F.*%5C.idl&amp;regexp=1" title="https://mxr.mozilla.org/mozilla-central/find?text=&amp;string=dom/indexedDB/.*\.idl&amp;regexp=1">interface files</a></li>
  <li><a href="/en/IndexedDB" title="https://developer.mozilla.org/en/IndexedDB">Using JavaScript Generators in Firefox&nbsp;</a></li>
</ul>
恢复到这个版本