mozilla

Revision 347303 of IndexedDB

  • Enlace amigable (slug) de la revisión: en/IndexedDB
  • Título de la revisión: IndexedDB
  • Id de la revisión: 347303
  • Creada:
  • Creador: MPoli
  • ¿Es la revisión actual? No
  • Comentario

Contenido de la revisión

{{ SeeCompatTable() }}

IndexedDB es una API para almacenamiento del lado del cliente de cantidades significativas de datos esctructurados y para busquedas de alto rendimiento en estos datos usando indices. Mientras DOM Storage es util para guardar cantidades pequenas de datos, es menos util para guardad grandes cantidades de datos estructurados. IndexedDB provee una solucion.

Esta pagina es basicamente el punto de entrada para la descripcion tecnica de los objetos de la API. Si necesita algo elemental, debería consultar Conceptos básicos sobre IndexedDB. Para más detalles, vea Usando IndexedDB.

IndexedDB provee APIs separadas para acceso sincrónico y asincrónico. La API sincrónica está destinada a ser usada solamente dentro de Web Workers pero aún no está implementada en ningún navegador. La API asincrónica trabaja tanto con o sin Web Workers.

API asincrónica

Los métodos de la API asincrónica retornan sin bloquear el hilo que la llamó. Para conseguir acceso asincrónico a la base de datos, hay que llamar open() en el atributo indexedDB de un objeto window. Este método retorna un objeto IDBRequest (IDBOpenDBRequest); las operaciones asincrónicas se comunican con la aplicación que las llama disparando eventos en los objetos IDBRequest.

Nota: El objeto indexedDB tiene prefijos en versiones antiguas de los navegadores (propiedad mozIndexedDB en Gecko < 16, webkitIndexedDB en Chrome, y msIndexedDB en IE 10).

  • IDBFactory provee acceso a una base de datos. This is the interface implemented by the global object indexedDB and is therefore the entry point for the API.
  • IDBCursor iterates over object stores and indexes.
  • IDBCursorWithValue iterates over object stores and indexes and returns the cursor's current value.
  • IDBDatabase represents a connection to a database. It's the only way to get a transaction on the database.
  • IDBEnvironment provides access to a client-side database. It is implemented by window objects.
  • IDBIndex provides access to the metadata of an index.
  • IDBKeyRange defines a range of keys.
  • IDBObjectStore represents an object store.
  • IDBOpenDBRequest represents a request to open a database.
  • IDBRequest provides access to results of asynchronous requests to databases and database objects. It is what you get when you call an asynchronous method.
  • IDBTransaction represents a transaction. You create a transaction on a database, specify the scope (such as which object stores you want to access), and determine the kind of access (read only or write) that you want.
  • IDBVersionChangeEvent indicates that the version of the database has changed.

An early version of the specification also defined these now removed interfaces. They are still documented in case you need to update previously written code:

There is also a synchronous version of the API.  The Synchronous API has not been implemented in any browser.  It is intended for use with WebWorkers.

Storage limits

There isn't any limit on a single database item's size. However there may be a limit on each IndexedDB database's size. This limit (and the way the user interface will assert it) may vary from one browser to another:

Example

A powerful example of what IndexedDB can be utilized for on the web is the example by Marco Castelluccio, winner of the IndexedDB Mozilla DevDerby. The winning demo was eLibri, a library and eBook reader application.

Browser compatibility

{{ CompatibilityTable() }}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Asynchronous API

24.0
11.0 {{ property_prefix("webkit") }}

{{ CompatGeckoDesktop("16.0") }}
{{ CompatGeckoDesktop("2.0") }} {{ property_prefix("moz") }}

10 {{ property_prefix("ms") }} {{ CompatNo() }} {{ CompatNo() }}
Synchronous API
(used with WebWorkers)
{{ CompatNo() }} {{ CompatNo() }}
See {{ bug(701634) }}
{{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Asynchronous API {{ CompatNo() }} {{ CompatGeckoDesktop("6.0") }} {{ property_prefix("moz") }} {{ CompatNo() }} {{ CompatNo() }} {{ CompatNo() }}

For another browser compatibility Matrix see also: When Can I Use IndexedDB

There is also the possibility of using IndexedDB on browsers that support WebSQL by using the IndexedDB Polyfill.

See also

Fuente de la revisión

<p>{{ SeeCompatTable() }}</p>
<p>IndexedDB es una API para almacenamiento del lado del cliente de cantidades significativas de datos esctructurados y para busquedas de alto rendimiento en estos datos usando indices. Mientras <a href="/en-US/docs/DOM/Storage" title="en-US/docs/DOM/Storage">DOM Storage</a> es util para guardar cantidades pequenas de datos, es menos util para guardad grandes cantidades de datos estructurados. IndexedDB provee una solucion.</p>
<p>Esta pagina es basicamente el punto de entrada para la descripcion tecnica de los objetos de la API. Si necesita algo elemental, debería consultar <a href="/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB" title="/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB">Conceptos básicos sobre IndexedDB</a>. Para más detalles, vea <a href="https://developer.mozilla.org/en-US/docs/IndexedDB/Using_IndexedDB" title="https://developer.mozilla.org/en-US/docs/IndexedDB/Using_IndexedDB">Usando IndexedDB</a>.</p>
<p>IndexedDB provee APIs separadas para acceso sincrónico y asincrónico. La API sincrónica está destinada a ser usada solamente dentro de <a href="/en-US/docs/DOM/Worker" title="Worker">Web Workers</a> pero aún no está implementada en ningún navegador. La API asincrónica trabaja tanto con o sin Web Workers.</p>
<h2 id="Asynchronous_API">API asincrónica</h2>
<p>Los métodos de la API asincrónica retornan sin bloquear el hilo que la llamó. Para conseguir acceso asincrónico a la base de datos, hay que llamar <code><a href="/en-US/docs/IndexedDB/IDBFactory#open" title="en-US/docs/IndexedDB/IDBFactory#open">open</a>()</code> en el atributo <a href="/en-US/docs/IndexedDB/IDBEnvironment#attr_indexedDB" title="en-US/docs/IndexedDB/IDBEnvironment#attr indexedDB"><code>indexedDB</code></a> de un objeto <a href="/en-US/docs/DOM/window" title="en-US/docs/DOM/window">window</a>. Este método retorna un objeto IDBRequest (IDBOpenDBRequest); las operaciones asincrónicas se comunican con la aplicación que las llama disparando eventos en los objetos IDBRequest.</p>
<div class="note">
  <p>Nota: El objeto <code>indexedDB</code> tiene prefijos en versiones antiguas de los navegadores (propiedad <code>mozIndexedDB</code> en Gecko &lt; 16, <code>webkitIndexedDB</code> en Chrome, y <code>msIndexedDB</code> en IE 10).</p>
</div>
<ul>
  <li><a href="/en-US/docs/IndexedDB/IDBFactory" title="en-US/docs/IndexedDB/IDBFactory"><code>IDBFactory</code></a> provee acceso a una base de datos. This is the interface implemented by the global object <code>indexedDB</code> and is therefore the entry point for the API.</li>
  <li><a href="/en-US/docs/IndexedDB/IDBCursor" title="en-US/docs/IndexedDB/IDBCursor"><code>IDBCursor</code></a> iterates over object stores and indexes.</li>
  <li><a href="/en-US/docs/IndexedDB/IDBCursorWithValue"><code>IDBCursorWithValue</code></a> iterates over object stores and indexes and returns the cursor's current value.</li>
  <li><a href="/en-US/docs/IndexedDB/IDBDatabase" title="en-US/docs/IndexedDB/IDBDatabase"><code>IDBDatabase</code></a> represents a connection to a database. It's the only way to get a transaction on the database.</li>
  <li><a href="/en-US/docs/IndexedDB/IDBEnvironment" title="en-US/docs/IndexedDB/IDBEnvironment"><code>IDBEnvironment</code></a> provides access to a client-side database. It is implemented by <a href="/../en-US/docs/DOM/window" rel="internal" title="../en-US/docs/DOM/window">window</a> objects.</li>
  <li><a href="/en-US/docs/IndexedDB/IDBIndex" title="en-US/docs/IndexedDB/IDBIndex"><code>IDBIndex</code></a> provides access to the metadata of an index.</li>
  <li><code><a href="/en-US/docs/IndexedDB/IDBKeyRange" title="en-US/docs/IndexedDB/KeyRange">IDBKeyRange</a></code> defines a range of keys.</li>
  <li><a href="/en-US/docs/IndexedDB/IDBObjectStore" title="en-US/docs/IndexedDB/IDBObjectStore"><code>IDBObjectStore</code></a> represents an object store.</li>
  <li><a href="/en-US/docs/IndexedDB/IDBOpenDBRequest" title="en-US/docs/IndexedDB/IDBOpenDBRequest"><code>IDBOpenDBRequest</code></a> represents a request to open a database.</li>
  <li><a href="/en-US/docs/IndexedDB/IDBRequest" title="en-US/docs/IndexedDB/IDBRequest"><code>IDBRequest</code></a> provides access to results of asynchronous requests to databases and database objects. It is what you get when you call an asynchronous method.</li>
  <li><a href="/en-US/docs/IndexedDB/IDBTransaction" title="en-US/docs/IndexedDB/IDBTransaction"><code>IDBTransaction</code></a> represents a transaction. You create a transaction on a database, specify the scope (such as which object stores you want to access), and determine the kind of access (read only or write) that you want.</li>
  <li><a href="/en-US/docs/IndexedDB/IDBVersionChangeEvent" title="IDBVersionChangeEvent"><code>IDBVersionChangeEvent</code></a> indicates that the version of the database has changed.</li>
</ul>
<p>An early version of the specification also defined these now removed interfaces. They are still documented in case you need to update previously written&nbsp;code:</p>
<ul>
  <li><code><a href="/en-US/docs/IndexedDB/IDBVersionChangeRequest" title="https://developer.mozilla.org/en-US/docs/IndexedDB/IDBVersionChangeRequest">IDBVersionChangeRequest</a></code> represents a request to change the version of a database. The way to change the version of the database has since changed (by calling <a href="/en-US/docs/IndexedDB/IDBFactory#open" title="en-US/docs/IndexedDB/IDBFactory#open"><code>IDBFactory.open()</code></a> without also calling&nbsp;<a href="/en-US/docs/IndexedDB/IDBDatabase#setVersion()" title="en-US/docs/IndexedDB/IDBDatabase#setVersion()"><code>IDBDatabase.setVersion()</code></a>), and the interface <a href="/en-US/docs/IndexedDB/IDBOpenDBRequest" title="en-US/docs/IndexedDB/IDBOpenDBRequest"><code>IDBOpenDBRequest</code></a> now has the functionality of the removed <code>IDBVersionChangeRequest</code>.</li>
  <li><code><a href="/en-US/docs/IndexedDB/IDBDatabaseException" title="en-US/docs/IndexedDB/DatabaseException">IDBDatabaseException&nbsp;</a></code>&nbsp;{{ obsolete_inline() }}&nbsp;represents exception conditions that can be encountered while performing database operations.</li>
</ul>
<p>There is also a <a href="/en-US/docs/IndexedDB/Syncronous_API" title="/en-US/docs/IndexedDB/SyncronousAPI">synchronous version of the API</a>.&nbsp; The Synchronous API has not been implemented in any browser.&nbsp; It is intended for use with <a href="/en-US/docs/DOM/Using_web_workers" title="https://developer.mozilla.org/en-US/docs/Using_web_workers">WebWorkers</a>.</p>
<h2 id="Storage_limits">Storage limits</h2>
<p>There isn't any limit on a single database item's size. However there may be a limit on each IndexedDB database's size. This limit (and the way the user interface will assert it) may vary from one browser to another:</p>
<ul>
  <li>
    <p>Firefox: no limit on the IndexedDB database's size. The user interface will just ask permission for storing blobs bigger than 50 MB. This size quota can be customized through the <code>dom.indexedDB.warningQuota</code> preference (which is defined in <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>Google Chrome: see <a class="link-https" href="https://developers.google.com/chrome/whitepapers/storage#temporary" rel="freelink">https://developers.google.com/chrome...rage#temporary</a></li>
</ul>
<h2 id="Example" name="Example">Example</h2>
<p>A powerful example of what IndexedDB can be utilized for on the web is the example by Marco Castelluccio, winner of the IndexedDB Mozilla DevDerby. The winning demo was <a href="/en-US/demos/detail/elibri" title="https://developer.mozilla.org/en-US/demos/detail/elibri">eLibri</a>, a library and eBook reader application.</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<p>{{ CompatibilityTable() }}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td>Asynchronous API</td>
        <td>
          <p>24.0<br />
            11.0 {{ property_prefix("webkit") }}</p>
        </td>
        <td>
          <p>{{ CompatGeckoDesktop("16.0") }}<br />
            {{ CompatGeckoDesktop("2.0") }} {{ property_prefix("moz") }}</p>
        </td>
        <td>10 {{ property_prefix("ms") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
      <tr>
        <td>Synchronous API<br />
          (used with <a href="/en-US/docs/DOM/Using_web_workers" title="https://developer.mozilla.org/en-US/docs/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>Asynchronous API</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatGeckoDesktop("6.0") }} {{ property_prefix("moz") }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
        <td>{{ CompatNo() }}</td>
      </tr>
    </tbody>
  </table>
</div>
<p>For another browser compatibility Matrix see also: <a href="http://caniuse.com/indexeddb" title="http://caniuse.com/indexeddb">When Can I Use IndexedDB</a></p>
<p>There is also the possibility of using IndexedDB on <a href="http://caniuse.com/sql-storage" title="http://caniuse.com/sql-storage"> browsers that support WebSQL</a> by using the <a href="https://github.com/axemclion/IndexedDBShim" title="https://github.com/axemclion/IndexedDBShim">IndexedDB Polyfill</a>.</p>
<h2 id="See_also">See also</h2>
<ul>
  <li><a href="/en-US/docs/IndexedDB/Basic_Concepts_Behind_IndexedDB" title="en-US/docs/IndexedDB/Basic Concepts Behind IndexedDB">Basic Concepts About IndexedDB</a></li>
  <li><a href="/en-US/docs/IndexedDB/Using_IndexedDB" title="en-US/docs/IndexedDB/IndexedDB primer">Using 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/">Storing images and files in IndexedDB</a></li>
  <li><a class="external" href="http://www.html5rocks.com/tutorials/indexeddb/todo/" title="http://www.html5rocks.com/tutorials/indexeddb/todo/">A simple TODO list using HTML5 IndexedDB</a>. {{ Note("This tutorial is based on an old version of the specification and does not work on up-to-date browsers: for example, it still uses the removed <code>setVersion()</code> method.") }}</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>
  <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 — The Store in Your Browser</a></li>
  <li><a class="external" href="http://caniuse.com/indexeddb" title="http://caniuse.com/indexeddb">IndexedDB Support in browsers</a></li>
  <li><a class="external" href="http://nparashuram.com/IndexedDB/trialtool/index.html" title="http://nparashuram.com/IndexedDB/trialtool/index.html">IndexedDB Examples</a></li>
  <li><a href="https://github.com/axemclion/IndexedDBShim" title="https://github.com/axemclion/IndexedDBShim">IndexedDB Polyfill</a> for browsers that only support WebSQL (e.g. mobile WebKit)</li>
  <li><a href="http://nparashuram.com/IndexedDBShim/" title="http://nparashuram.com/IndexedDBShim/">JQuery IndexedDB plugin</a></li>
</ul>
Revertir a esta revisión