blob: ca8c7791b1ae8dba32e75b80abff94a493f6fff5 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
|
---
title: IndexedDB
slug: Web/API/IndexedDB_API
tags:
- IndexedDB
- IndexedDB API
- Object Storage
- Workers
- localforage
translation_of: Web/API/IndexedDB_API
---
<p>{{DefaultAPISidebar("IndexedDB")}}</p>
<p>IndexedDB 是一种底层 API，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。该 API 使用索引实现对数据的高性能搜索。虽然 <a href="/zh-CN/docs/Web/API/Web_Storage_API" title="en-US/docs/DOM/Storage">Web Storage</a> 在存储较少量的数据很有用，但对于存储更大量的结构化数据来说力不从心。而 IndexedDB 提供了这种场景的解决方案。本页面 MDN IndexedDB 的主要引导页 - 这里，我们提供了完整的 API 参考和使用指南，浏览器支持细节，以及关键概念的一些解释的链接。</p>
<p>{{AvailableInWorkers}}</p>
<div class="note">
<p><strong>注意</strong>：IndexedDB API是强大的，但对于简单的情况可能看起来太复杂。如果你更喜欢一个简单的API，请尝试 <a href="https://localforage.github.io/localForage/">localForage</a>、<a href="http://www.dexie.org/">dexie.js</a>、<a href="https://pouchdb.com/">PouchDB</a>、<a href="https://www.npmjs.com/package/idb">idb</a>、<a href="https://www.npmjs.com/package/idb-keyval">idb-keyval</a>、<a href="https://jsstore.net/">JsStore</a> 或者 <a href="https://github.com/google/lovefield">lovefield</a> 之类的库，这些库使 IndexedDB 对开发者来说更加友好。</p>
</div>
<h2 id="关键概念和用法">关键概念和用法</h2>
<p>IndexedDB 是一个事务型数据库系统，类似于基于 SQL 的 RDBMS。 然而，不像 RDBMS 使用固定列表，IndexedDB 是一个基于 JavaScript 的面向对象数据库。IndexedDB 允许您存储和检索用<strong>键</strong>索引的对象；可以存储<a href="https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/The_structured_clone_algorithm">结构化克隆算法</a>支持的任何对象。您只需要指定数据库模式，打开与数据库的连接，然后检索和更新一系列<strong>事务</strong>。</p>
<ul>
<li>阅读更多关于 <a href="https://developer.mozilla.org/en-US/docs/Web/API/IndexedDB_API/Basic_Concepts_Behind_IndexedDB">IndexedDB背后的概念</a>。</li>
<li>从<a href="/zh-CN/docs/Web/API/IndexedDB_API/Using_IndexedDB">使用 IndexedDB</a> 指南的第一准则中学习异步使用 IndexedDB。</li>
<li>同时使用 IndexedDB 储存离线数据和 Service Workers 储存离线资源，其简述请查看 <a href="/zh-CN/docs/Web/Progressive_web_apps/Offline_Service_workers">Service Workers 制作离线 PWA</a>。</li>
</ul>
<div class="note">
<p>注意： 正如大多数的 web 储存解决方案一样，IndexedDB 也遵守<a href="/zh-CN/docs/Web/Security/Same-origin_policy">同源策略</a>。因此当你在某个域名下操作储存数据的时候，你不能操作其他域名下的数据。</p>
</div>
<h3 id="同步和异步（Synchronous、asynchronous）">同步和异步（Synchronous、asynchronous）</h3>
<p>使用 IndexedDB 执行的操作是异步执行的，以免阻塞应用程序。IndexedDB 最初包括同步和异步 API。同步 API 仅用于 <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/Performance/Using_web_workers">Web Workers</a>，且已从规范中移除，因为尚不清晰是否需要。但如果 Web 开发人员有足够的需求，可以重新引入同步 API。</p>
<h3 id="储存限制和回收标准">储存限制和回收标准</h3>
<p>有许多 Web 技术在客户端（即本地磁盘）存储各种数据。IndexedDB 是最常见的一个。浏览器计算分配给 Web 数据存储的空间以及达到该限制时要删除的内容的过程并不简单，并且在浏览器之间有所不同。<a href="/zh-CN/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria">浏览器存储限制和回收标准</a>尝试解释这是如何工作的，至少在火狐的情况下是如此。</p>
<h2 id="接口">接口</h2>
<p>为了获取数据库的访问权限，需要在 <a href="/zh-CN/docs/Web/DOM/Window">window</a> 对象的 <a href="/zh-CN/docs/Web/API/IDBEnvironment.indexedDB">indexedDB</a> 属性上调用 <a href="/zh-CN/docs/Web/API/IDBFactory.open">open()</a> 方法。该方法返回一个 {{domxref("IDBRequest")}} 对象；异步操作通过在 {{domxref("IDBRequest")}} 对象上触发事件来和调用程序进行通信。</p>
<h3 id="连接数据库">连接数据库</h3>
<dl>
<dt>{{domxref("IDBEnvironment")}}</dt>
<dd>提供 IndexedDB 功能。它由 {{domxref("window")}} 和 {{domxref("worker")}} 实现，这个接口不再是 2.0 规范的一部分。</dd>
<dt>{{domxref("IDBFactory")}}</dt>
<dd>提供数据库访问。这是全局对象 {{domxref("WindowOrWorkerGlobalScope/indexedDB", "indexedDB")}} 实现的接口，因此是 API 的入口。</dd>
<dt>{{domxref("IDBOpenDBRequest")}}</dt>
<dd>表示一个打开数据库的请求。</dd>
<dt>{{domxref("IDBDatabase")}}</dt>
<dd>表示一个数据库连接。这是在数据库中获取事务的唯一方式。</dd>
<dt>
<h3 id="接收和修改数据">接收和修改数据</h3>
</dt>
<dt>{{domxref("IDBTransaction")}}</dt>
<dd>表示一个事务。在数据库上创建一个事务，指定作用域（例如要访问的存储对象），并确定所需的访问类型（只读或读写）。</dd>
<dt>{{domxref("IDBRequest")}}</dt>
<dd>处理数据库请求并提供对结果访问的通用接口。</dd>
<dt>{{domxref("IDBObjectStore")}}</dt>
<dd>表示允许访问通过主键查找的 IndexedDB 数据库中的一组数据的对象存储区。</dd>
<dt>{{domxref("IDBIndex")}}</dt>
<dd><font><font>也是为了允许访问 IndexedDB 数据库中的数据子集，但使用索引来检索记录而不是主键。</font><font>这有时比使用 </font></font><a href="/zh-CN/docs/Web/API/IDBObjectStore">IDBObjectStore</a> 更快<font><font>。</font></font></dd>
<dt>{{domxref("IDBCursor")}}</dt>
<dd>迭代对象存储和索引。</dd>
<dt>{{domxref("IDBCursorWithValue")}}</dt>
<dd>迭代对象存储和索引并返回游标的当前值。</dd>
<dt>{{domxref("IDBKeyRange")}}</dt>
<dd>定义可用于从特定范围内的数据库检索数据的键范围。</dd>
<dt>{{domxref("IDBLocaleAwareKeyRange")}} {{Non-standard_inline}}</dt>
<dd>定义一个键范围，可用于从特定范围内的数据库中检索数据，并根据为特定索引指定的语言环境的规则进行排序（详见 <a href="/zh-CN/docs/Web/API/IDBObjectStore/createIndex#Parameters">createIndex()</a> 的参数）。这个接口不再是 2.0 规范的一部分。</dd>
<dt>
<h3 id="自定义事件接口">自定义事件接口</h3>
<p>此规范使用以下自定义接口触发事件：</p>
</dt>
<dt>{{domxref("IDBVersionChangeEvent")}}</dt>
<dd>作为 {{domxref("IDBOpenDBRequest.onupgradeneeded")}} 事件的处理程序的结果，<code>IDBVersionChangeEvent </code>接口表示数据库的版本已经发生了改变。</dd>
<dt>
<h3 id="过时的接口">过时的接口</h3>
<p><font>规范的早期版本还定义了这些现在已删除的接口。这些文档便于您需要更新以前编写的代码</font>：</p>
</dt>
<dt>{{domxref("IDBVersionChangeRequest")}} {{obsolete_inline}}</dt>
<dd><font>表示更改数据库版本的请求。改变数据库版本的方法已经改变了（通过调用</font>{{domxref("IDBFactory.open")}} 而非{{domxref("IDBDatabase.setVersion")}}），接口{{domxref("IDBOpenDBRequest")}} 现在拥有{{domxref("IDBVersionChangeRequest")}}。</dd>
<dt>{{domxref("IDBDatabaseException")}} {{obsolete_inline}}</dt>
<dd>表示执行数据库操作时可能遇到的异常情况。</dd>
<dt>{{domxref("IDBTransactionSync")}} {{obsolete_inline}}</dt>
<dd>同步版本的 {{domxref("IDBTransaction")}}。</dd>
<dt>{{domxref("IDBObjectStoreSync")}} {{obsolete_inline}}</dt>
<dd>同步版本的 {{domxref("IDBObjectStore")}}。</dd>
<dt>{{domxref("IDBIndexSync")}} {{obsolete_inline}}</dt>
<dd>同步版本的 {{domxref("IDBIndex")}}。</dd>
<dt>{{domxref("IDBFactorySync")}} {{obsolete_inline}}</dt>
<dd>同步版本的 {{domxref("IDBFactory")}}。</dd>
<dt>{{domxref("IDBEnvironmentSync")}} {{obsolete_inline}}</dt>
<dd>同步版本的 {{domxref("IDBEnvironment")}}。</dd>
<dt>{{domxref("IDBDatabaseSync")}} {{obsolete_inline}}</dt>
<dd>同步版本的 {{domxref("IDBDatabase")}}。</dd>
<dt>{{domxref("IDBCursorSync")}} {{obsolete_inline}}</dt>
<dd>同步版本的 {{domxref("IDBCursor")}}。</dd>
</dl>
<h2 id="示例">示例</h2>
<ul>
<li><a href="https://marco-c.github.io/eLibri/">eLibri:</a> 由 IndexedDB Mozilla DevDerby 的获奖者 Marco Castelluccio 编写的一个功能强大的图书馆和电子书阅读器应用。</li>
<li><a href="https://github.com/chrisdavidmills/to-do-notifications/tree/gh-pages">To-do Notifications</a> (<a href="https://mdn.github.io/to-do-notifications/">view example live</a>): 参考文档中示例的应用程序。</li>
<li><a href="http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/">Storing images and files in IndexedDB</a></li>
</ul>
<h2 id="Browser_compatibility" name="Browser_compatibility">规范</h2>
<table>
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("IndexedDB 2")}}</td>
<td>{{Spec2("IndexedDB 2")}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName('IndexedDB')}}</td>
<td>{{Spec2('IndexedDB')}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="参见">参见</h2>
<ul>
<li><a href="https://localforage.github.io/localForage/">localForage</a>：一个简单的 Polyfill，提供了简单的客户端数据存储的值语法。它在后台使用 IndexedDB，并在不支持 IndexedDB 的浏览器中回退到 WebSQL 或 localStorage。</li>
<li><a href="http://www.dexie.org/">Dexie.js</a>：IndexedDB 的包装，通过简单的语法，可以更快地进行代码开发。</li>
<li><a href="https://github.com/erikolson186/zangodb">ZangoDB</a>：类似 MongoDB 的 IndexedDB 接口，支持 MongoDB 的大多数熟悉的过滤、投影、排序、更新和聚合功能。</li>
<li><a href="http://jsstore.net/">JsStore</a>：一个带有 SQL 语法的 IndexedDB 包装器。</li>
<li><a href="https://github.com/mWater/minimongo">MiniMongo</a>：<font>由 localstorage 支持的客户端内存中的 mongodb，通过 http 进行服务器同步。</font><font>MeteorJS 使用 MiniMongo。</font></li>
<li><a href="https://pouchdb.com/">PouchDB</a>：使用 IndexedDB 在浏览器中实现 CouchDB 的客户端。</li>
<li><a href="https://www.npmjs.com/package/idb">idb</a>：一个微小的（〜1.15k）库，大多 API 与 IndexedDB 类似，但做了一些小的改进，让数据库的可用性得到了大大的提升。</li>
<li><a href="https://www.npmjs.com/package/idb-keyval">idb-keyval</a>：使用 IndexedDB 实现的超级简单且小巧的（~600B）基于 Promise 的键值对存储。</li>
<li><a href="https://www.npmjs.com/package/@sifrr/storage">sifrr-storage</a>：一个非常小的（~2kB）基于 Promise 的客户端键值数据库。基于 IndexedDB、localStorage、WebSQL 和 Cookies 实现。它可以自动选择上述支持的数据库，并按照优先顺序使用。</li>
<li><a href="https://github.com/google/lovefield">lovefield</a>：Lovefield 是一个用于 Web App 的关系型数据库，使用 JavaScript 编写，可以在不同的浏览器环境中运行，提供了类似 SQL 的 API，速度快、安全且易用。</li>
</ul>
|
