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
156
157
158
159
160
161
162
163
164
165
166
167
|
---
title: IndexedDB
slug: Web/API/IndexedDB_API
translation_of: Web/API/IndexedDB_API
---
<div class="summary">
<p>IndexedDB é uma API para armazenamento client-side de quantidades significantes de informações e buscas com alta performance por índices. Enquanto <a href="https://developer.mozilla.org/pt-BR/docs/DOM/Storage">DOM Storage</a> é útil para armazenamento de pequenas quantidade de dados, IndexedDB é a solução para grande porção de dados estruturados.</p>
</div>
<p>Esta página basicamente é o ponto de entrada para uma descrição técnica dos objetos da API. Precisando de suporte ainda mais inicial consulte os <a href="https://developer.mozilla.org/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB">Conceitos Básicos sobre IndexedDb</a>. Para mais detalhes sobre a implementação, veja <a href="https://developer.mozilla.org/en-US/docs/IndexedDB/Using_IndexedDB">Usando IndexedDB</a>.<br>
<br>
IndexedDB provém APIs separadas para acesso tanto síncrono quanto assíncrono. As APIs síncronas devem ser utilizadas apenas dentro de <a href="https://developer.mozilla.org/en-US/docs/DOM/Worker">Web Workers</a>, apesar de não ser implementada por nenhum navegador atualmente. A API assíncrona funciona tanto com ou sem Web Workers, sendo que o Firefox ainda não implementou este.</p>
<h2 id="API_Assíncrona">API Assíncrona</h2>
<p>Os métodos da API assíncrona são chamados sem bloquear a thread que os chama. Para obter acesso assíncrono à database, chame <a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBFactory.open">open()</a> no atributo <a href="https://developer.mozilla.org/en-US/docs/Web/API/IDBEnvironment.indexedDB">indexedDB</a> do objeto <a href="https://developer.mozilla.org/en-US/docs/DOM/window">window</a>, que retornará um objeto {{domxref("IDBRequest")}}. Operações assíncronas comunicam-se com a aplicação que os chamam executando eventos nos objetos {{domxref("IDBRequest")}}.</p>
<div class="note">
<p>Nota: O objeto indexedDB é prefixado em navegadores mais antigos (propriedade mozIndexedDB em Gecko < 16, webkitIndexedDb em Chrome e msIndexedDB no IE 10).</p>
</div>
<p>As interfaces da API assíncrona do IndexedDB são:</p>
<dl>
<dt>{{domxref("IDBFactory")}}</dt>
<dd>Provém acesso ao banco de dados. É a interface implementado pelo objeto global indexedDB e é, portanto, o ponto de entrada para API.</dd>
<dt>{{domxref("IDBCursor")}}</dt>
<dd>Itera sobre objectStores e índices</dd>
<dt>{{domxref("IDBCursorWithValue")}}</dt>
<dd>Itera sobre objectStores e índices e retorna o atual valor do cursor</dd>
<dt>{{domxref("IDBDatabase")}}</dt>
<dd>Represents a connection to a database. It's the only way to get a transaction on the database.</dd>
<dt>{{domxref("IDBEnvironment")}}</dt>
<dd>Provides access to a client-side database. It is implemented by the {{ domxref("window") }} and {{ domxref("worker") }} objects.</dd>
<dt>{{domxref("IDBIndex")}}</dt>
<dd>Provides access to the metadata of an index.</dd>
<dt>{{domxref("IDBKeyRange")}}</dt>
<dd>Define um alcance das chaves.</dd>
<dt>{{domxref("IDBObjectStore")}}</dt>
<dd>Representa um ObjectStore</dd>
<dt>{{domxref("IDBOpenDBRequest")}}</dt>
<dd>Representa uma requisição para abrir o banco de dados.</dd>
<dt>{{domxref("IDBRequest")}}</dt>
<dd>Provém acesso a resultados de requisições assíncronas ao banco de dados e a objetos do banco de dados. É o que você obtém quando chama um método assíncrono.</dd>
<dt>{{domxref("IDBTransaction")}}</dt>
<dd>Representa uma transação. Você cria a transação no banco de dados, especifíca o escopo (tal como qual objectStore você deseja acessar), e determina que tipo de acesso (apenas leitura ou também escrita) daquilo que você deseja.</dd>
</dl>
<ul>
</ul>
<p>Uma versão anterior da especificação também define estas interfaces agora removidas. Elas ainda estão documentadas caso você precise atualizar códigos escritos anteriormente:</p>
<dl>
<dt>{{domxref("IDBVersionChangeRequest")}}</dt>
<dd>Representa uma requisição para alterar a versão do banco de dados. O modo de alterar a versão do banco de dados mudou então (chamando IDBFactory.open sem também chamar IDBDatabase.setVersion) e a interface IDBOpenDBRequest agora tem a funcionalidade do removido IDBVersionChangeRequest.</dd>
<dt>{{domxref("IDBDatabaseException")}} {{ obsolete_inline() }}</dt>
<dd>Representa condições de erro que podem ser encontradas enquanto performando operações no banco de dados.</dd>
</dl>
<ul>
</ul>
<div class="note">
<p> <strong>Nota</strong>: há também a <a href="https://developer.mozilla.org/en-US/docs/IndexedDB/Syncronous_API">versão síncrona da API</a>. A versão síncrona não tem implementação em qualquer navegador. É feita para ser utilizada com <a href="https://developer.mozilla.org/en-US/docs/DOM/Using_web_workers">WebWorkers</a>.</p>
</div>
<h2 id="Limites_de_Armazenamento">Limites de Armazenamento</h2>
<p>Não há qualquer limite em um único elemento da database. Entretanto podem haver limites quanto ao tamanho de cada banco de dados. Este limite (e a maneira com qual o usuário chega a ele) pode variar de um navegador para outro:</p>
<ul>
<li>
<p>Firefox: não há limite no tamanho do banco de dados. A interface do usuário irá apenas pedir a permissão para armazenar conjuntos com tamanho maior que 50mb. Este limite de tamanho pode ser customizado através da preferência dom.indexedDB.warningQuota (que é definida em <a href="http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.js" title="http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.js">http://mxr.mozilla.org/mozilla-central/source/modules/libpref/src/init/all.js</a>).</p>
</li>
<li>
<p>Google Chrome: veja <a class="link-https" href="https://developers.google.com/chrome/whitepapers/storage#temporary" rel="freelink">https://developers.google.com/chrome...rage#temporary</a></p>
</li>
</ul>
<h2 id="Example" name="Example">Exemplos</h2>
<ul>
<li>Um grande exemplo de para o que o indexedDb pode ser utilizado na web é o exemplo do Marco Castelluccion, vencedor do IndexedDB Mozilla DevDerby. A demonstração vencedora foi o eLibri, uma aplicação biblioteca e leitora de Ebook.</li>
<li>Você deveria também checar a referência de aplicações exemplo neste documento de referências: <a href="https://github.com/chrisdavidmills/to-do-notifications/tree/gh-pages">Notificações de A Fazer</a> (<a href="http://chrisdavidmills.github.io/to-do-notifications/">veja ao vivo</a>). Nem todo fragmento de código aparece neste exemplo, mas todo exemplo usa a mesma estrutura de dados e sintaxe, e fará sentido no contexto da aplicação.</li>
</ul>
<h2 id="Browser_compatibility" name="Browser_compatibility">Compatibilidade dos navegadores</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Característica</th>
<th>Chrome</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>API Assíncrona</td>
<td>
<p>11.0 {{ property_prefix("webkit") }}<br>
24</p>
</td>
<td>{{ CompatGeckoDesktop("2.0") }} {{ property_prefix("moz") }}<br>
{{ CompatGeckoDesktop("16.0") }}</td>
<td>10</td>
<td>17</td>
<td>11.1</td>
</tr>
<tr>
<td>API Síncrona (com <a href="https://developer.mozilla.org/en-US/docs/DOM/Using_web_workers">WebWorkers</a>)</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}<br>
See {{ bug(701634) }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
<td>{{ CompatNo() }}</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>API Assíncrona</td>
<td>4.4</td>
<td>{{ CompatGeckoDesktop("6.0") }} {{ property_prefix("moz") }}<br>
{{ CompatGeckoDesktop("16.0") }}</td>
<td>10</td>
<td>17</td>
<td>10.3</td>
</tr>
</tbody>
</table>
</div>
<div class="note">
<p>Nota: alguns browsers ainda não suportam IndexedDB mas suportam WebSQL, mais especificamente Safari/Webkit no desktop e iOS. Uma maneira de driblar este problema é utilizar IndexedDB Polyfill ou Shim, que recorre ao WebSQL para navegadores que não suportam.</p>
</div>
<h2 id="Veja_Também">Veja Também</h2>
<ul>
<li><a href="/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB" title="en-US/docs/IndexedDB/Basic Concepts Behind IndexedDB">Conceitos Básicos sobre IndexedDB</a></li>
<li><a href="/en-US/docs/IndexedDB/Using_IndexedDB" title="en-US/docs/IndexedDB/IndexedDB primer">Utilizando IndexedDB</a></li>
<li><a class="external" href="http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/" title="http://hacks.mozilla.org/2012/02/storing-images-and-files-in-indexeddb/">Armazenando Imagens e Arquivos com IndexedDB</a></li>
<li><a class="external" href="http://www.w3.org/TR/IndexedDB/" title="http://www.w3.org/TR/IndexedDB/">Especificação da API de Indexed Database</a></li>
<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 — O armazenamento em seu Navegador</a></li>
<li><a class="external" href="http://nparashuram.com/IndexedDB/trialtool/index.html" title="http://nparashuram.com/IndexedDB/trialtool/index.html">IndexedDB Exemplos</a></li>
<li><a href="https://github.com/axemclion/IndexedDBShim" title="https://github.com/axemclion/IndexedDBShim">IndexedDB Polyfill/Shim</a> para navegadores que apenas suportam WebSQL (e.g. mobile WebKit)</li>
<li><a href="http://nparashuram.com/IndexedDBShim/" title="http://nparashuram.com/IndexedDBShim/">JQuery IndexedDB plugin</a></li>
</ul>
|