使用 IndexedDB

  • 版本网址缩略名: IndexedDB/Using_IndexedDB
  • 版本标题: Using IndexedDB
  • 版本 id: 337671
  • 创建于:
  • 创建者: princetoad@gmail.com
  • 是否是当前版本?
  • 评论

修订内容

IndexedDB 是一种可以让你在用户浏览器内持久化存储数据的方法。IndexedDB 为生成 Web Application 提供了丰富的查询能力,使我们的应用在在线和离线时都可以正常工作。

IndexedDB 包含一组synchronous(同步) 和一组 asynchronous(异步) API. 同步API现在没有被任何浏览器支持.  这篇文章是说如何使用异步api的.

基本套路(操作流程)

在进行操作以前,请务必将IndexedDB的真实存储文件删除,以保证是一个空的开始环境,不然无法触发onupgradeneeded事件。windows下的存储文件在:C:\Users\username\AppData\Roaming\Mozilla\Firefox\Profiles\<*>.default\indexedDB。

1,打开一个数据库.

假定我们创造的数据库名为db。

window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
//多浏览器兼容,标准确定后只需要第一项
window.db=null;// 这个全局变量会用到的,存储数据库对象
window.addEventListener("DOMContentLoaded", contentLoaded, false);
//dom加载完毕后再运行代码可以避免很多不必要的问题
function contentLoaded() {
 var dbOpenRequest= indexedDB.open("db");
 dbOpenRequest.onerror = function (evt) {    // evt.target == dbOpenRequest
  alert("IndexedDB dbOpenRequest error: " + evt.target.error.name);
 }
 dbOpenRequest.onsuccess = function (evt) {
  db = evt.target.result;//db对象就得到了
 }
 dbOpenRequest.onupgradeneeded = function(evt) {    // only creat or version change triger it
  //只有创建或者改变版本的情况下才能触发它,经测试,firefox只有手动删除数据库文件才能促使他
  // 新建立数据库,什么清空缓存之类无效!实验的时候特别注意要删除数据库文件。
  alert ("here")
  // 这里应该填充objectStore建立代码见下。
 }

2, 创造一个object stores存储。

// 假定要存的是人的名字和邮件如下表
var peopleData = [
{ name: "John Dow", email: "john@company.com" },
{ name: "Don Dow", email: "don@company.com" }
];

dbOpenRequest.onupgradeneeded = function(evt) { //接上面代码
  var db = evt.target.result;
  var objectStore = db.createObjectStore("people", { keyPath: "name" });
  objectStore.createIndex("email", "email", { unique: true });
//这个事件发生在dbOpenRequest.onsuccess以前。
//这里已经建立了Objcetstore, 但是操作是否成功还未知。
//dbOpenRequest.onsuccess标志此布操作成功。
};
添加和删除数据

在对一个新的数据库做操作以前,必须开始一个事务(transaction). 事务 和object stores挂钩. 事务有三种模式(read-only, read/write, and versionchange)。

var transaction = db.transaction(["people"], “readwrite”);

transaction()返回一个事务对象. 第一个参数是挂钩的store,空表示所有. 如果第二个参数是空,你会得到一个只读的transaction. 因为这里要读写,所以传递了一个 readwrite 标志.

事务有三个事件:error, abort, 和complete. 错误会导致事务停止处理运行,除非在错误处理中使用了preventDefault() 函数.

// 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("people");
for (var i in customerData) {
  var request = objectStore.add(peopleData[i]);
  request.onsuccess = function(event) {
    // event.target.result == peopleData[i].name
  };
}

这里的add()的请求result等于添加的对象的键值. 所以这里应该等于peopleData的name属性. 需要注意的是, add()函数要求键值同数据库中的不同. 如果你要修改现存的记录,或者你并不在乎这条记录都否存在, 使用put() 函数.

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 是一种可以让你在用户浏览器内持久化存储数据的方法。IndexedDB 为生成 Web Application 提供了丰富的查询能力,使我们的应用在在线和离线时都可以正常工作。</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现在没有被任何浏览器支持.&nbsp; 这篇文章是说如何使用异步api的.</p>
<h2 id="pattern" name="pattern">基本套路(操作流程)</h2>
<p>在进行操作以前,请务必将IndexedDB的真实存储文件删除,以保证是一个空的开始环境,不然无法触发onupgradeneeded事件。windows下的存储文件在:C:\Users\username\AppData\Roaming\Mozilla\Firefox\Profiles\&lt;*&gt;.default\indexedDB。</p>
<p>1,打开一个数据库.</p>
<p>假定我们创造的数据库名为db。</p>
<pre class="brush: js" style="margin-left: 80px;">
window.indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
//多浏览器兼容,标准确定后只需要第一项
window.db=null;// 这个全局变量会用到的,存储数据库对象
window.addEventListener("DOMContentLoaded", contentLoaded, false);
//dom加载完毕后再运行代码可以避免很多不必要的问题
function contentLoaded() {
 var dbOpenRequest= indexedDB.open("db");
 dbOpenRequest.onerror = function (evt) {&nbsp;&nbsp; &nbsp;// evt.target == dbOpenRequest
  alert("IndexedDB dbOpenRequest error: " + evt.target.error.name);
 }
 dbOpenRequest.onsuccess = function (evt) {
  db = evt.target.result;//db对象就得到了
 }
 dbOpenRequest.onupgradeneeded = function(evt) {&nbsp;&nbsp; &nbsp;// only creat or version change triger it
  //只有创建或者改变版本的情况下才能触发它,经测试,firefox只有手动删除数据库文件才能促使他
  // 新建立数据库,什么清空缓存之类无效!实验的时候特别注意要删除数据库文件。
  alert ("here")
  // 这里应该填充objectStore建立代码见下。
 }

</pre>
<p>2, 创造一个object stores存储。</p>
<pre class="brush: js">
// 假定要存的是人的名字和邮件如下表
var peopleData = [
{ name: "John Dow", email: "john@company.com" },
{ name: "Don Dow", email: "don@company.com" }
];

dbOpenRequest.onupgradeneeded = function(evt) { //接上面代码
  var db = evt.target.result;
  var objectStore = db.createObjectStore("people", { keyPath: "name" });
  objectStore.createIndex("email", "email", { unique: true });
//这个事件发生在dbOpenRequest.onsuccess以前。
//这里已经建立了Objcetstore, 但是操作是否成功还未知。
//dbOpenRequest.onsuccess标志此布操作成功。
};</pre>
<div>
  添加和删除数据</div>
<p>在对一个新的数据库做操作以前,必须开始一个事务(transaction). 事务 和object stores挂钩. 事务有三种模式(read-only, read/write, and versionchange)。</p>
<pre class="brush: js">
var transaction = db.transaction(["people"], “readwrite”);</pre>
<p><code>transaction()</code>返回一个事务对象. 第一个参数是挂钩的store,空表示所有. 如果第二个参数是空,你会得到一个只读的transaction. 因为这里要读写,所以传递了一个 <code>readwrite</code> 标志.</p>
<p>事务有三个事件:<code>error</code>, <code>abort</code>, <code>和complete</code>. 错误会导致事务停止处理运行,除非在错误处理中使用了<code>preventDefault()</code> 函数.</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("people");
for (var i in customerData) {
  var request = objectStore.add(peopleData[i]);
  request.onsuccess = function(event) {
    // event.target.result == peopleData[i].name
  };
}</pre>
<p>这里的add()<code>的请求result等于添加的对象的键值</code>. 所以这里应该等于peopleData的name属性. 需要注意的是, <code>add()函数要求键值同数据库中的不同</code>. 如果你要修改现存的记录,或者你并不在乎这条记录都否存在, 使用<code>put()</code> 函数.</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>
恢复到这个版本