Almacenamiento

  • Enlace amigable (slug) de la revisión: DOM/Almacenamiento
  • Título de la revisión: Almacenamiento
  • Id de la revisión: 73654
  • Creada:
  • Creador: Mgjbot
  • ¿Es la revisión actual? No
  • Comentario robot Añadido: [[pl:DOM:Storage]]

Contenido de la revisión

{{template.DomRef()}}

Introducción

El almacenamiento DOM (DOM Storage) es el nombre dado al conjunto de características relacionadas con el almacenamiento introducidas en la especificación de aplicaciones web 1.0. El almacenamiento DOM está diseñado para facilitar una alternativa amplia, segura y sencilla para almacenar información en cookies. Actualmente sólo está disponible en los navegadores basados en Mozilla, habiendo comenzado con Firefox 2.

Nota: El almacenamiento DOM no es lo mismo que mozStorage (las interfaces XPCOM de Mozilla para SQLite) o la API para guardar sesiones (una utilidad de almacenamiento XPCOM para ser usada por extensiones).

Descripción

El mecanismo de almacenamiento DOM es el medio a través del cual pares de clave/valor pueden ser almacenadas de forma segura para ser recuperadas y utilizadas más adelante. La meta de este añadido es suministrar un método comprensivo a través del cual puedan construirse aplicaciones interactivas (incluyendo características avanzadas tales como ser capaces de trabajar "offline" durante largos períodos de tiempo).

Actualmente sólo los navegadores basados en Mozilla proporcionan una implementación funcional de la especificación del almacenamiento DOM. Sin embargo, Internet Explorer posee una característica similar llamada "userData behavior" que permite conservar datos entre múltiples sesiones.

El almacenamiento DOM es útil ya que ningún navegador dispone de buenos métodos para conservar cantidades razonables de datos durante un periodo de tiempo. Las cookies de los navegadores tienen una capacidad limitada y no proporcionan soporte para organizar datos persistentes y otros métodos (tales como almacenamiento local de Flash) necesitan un plugin externo.

Una de las primeras aplicaciones hechas públicas que hace uso de la nueva funcionalidad de almacenamiento DOM (además del userData Behavior de Internet Explorer) fue halfnote (una aplicación para tomar notas) escrita por Aaron Boodman. En su aplicación, Aaron enviaba notas hacia el servidor (cuando la conexión a Internet estaba disponible) y simultáneamente las guardaba en local. Esto permitía al usuario escribir notas de modo seguro incluso cuando no disponía de conexión a Internet.

Aunque el concepto e implementación presentada en halfnote era en comparación simple, su cración mostró las posibilidades de esta nueva generación de aplicaciones web utilizables tanto con conexión como sin ella.

Referencias

Los siguientes objetos globales existen como propiedades de cada objeto window. Esto significa que pueden ser accedidas como sessionStorage o window.sessionStorage (Esto es importante ya que se puede usar IFrames para almacenar o acceder a datos adicionales, más allá de lo que está inmediatamente incluido en la página).

sessionStorage

Este es un objeto global (sessionStorage) que mantiene un área de almacenamiento que está disponible durante la sesión de página. Una sesión de página existe mientras el navegador esté abierto y sobrevive a recargas o restauraciones de páginas. Abrir una página en una nueva pestaña o en una ventana provoca que se cree una nueva sesión.

// Guardar datos en el almacén de la sesión actual
sessionStorage.username = "John";

// Acceder a algunos datos almacenados
alert( "username = " + sessionStorage.username );

El objeto sessionStorage es más usado para manejar datos temporales que deberían ser guardados y recuperados si el navegador es recargado accidentalmente.

Note: sessionStorage debería además ser capaz de restaurar los datos después de que el navegador haya terminado repentinamente (y haya sido restaurado) pero debido al {{template.Bug(339445)}} esto aún no funciona en Firefox. Mientras esto se arregla, el uso de sessionStorage como una medida preventiva se sirve a debate.

Ejemplos:

Autoguardado de los contenidos de un campo de texto y, si el navegador se recarga accidentalmente, restauración del contenido del campo de texto para evitar la pérdida de datos.

 // Obtener el campo de texto al que vamos a seguir la pista
 var field = document.getElementById("field");
 
 // Ver si se tiene un valor de autoguardado
 // (esto sólo sucede si la página es actualizada accidentelmente)
 if ( sessionStorage.autosave ) {
     // Restore the contents of the text field
     field.value = sessionStorage.autosave;
 }
 
 // Comprobar los contenidos del campo de texto cada segundo
 setInterval(function(){
     // And save the results into the session storage object
     sessionStorage.autosave = field.value;
 }, 1000);

Más información:

globalStorage

Este es un objeto global (globalStorage) que mantiene múltiples áreas públicas y privadas que pueden ser utilizadas para guardar datos durante un largo período de tiempo (p.e. sobre múltiples páginas y sesiones de navegador).

// Guardar datos a los que sólo pueden acceder scripts del dominio mozilla.org
globalStorage['mozilla.org'].snippet = "<b>Hello</b>, how are you?";

// Guardar algunos datos que cualquier página web de cualquier dominio puede acceder
globalStorage[''].favBrowser = "Firefox";

Específicamente, el objeto globalStorage proporciona acceso a un número de diferentes objetos de almacenamiento en los que los datos pueden ser guardados. Por ejemplo, si se construye una página web que usa globalStorage en este dominio (developer.mozilla.org) se dispondría de los siguientes objetos de almacenamiento:

  • globalStorage{{mediawiki.external('\'developer.mozilla.org\'')}} - Todas las páginas web dentro del subdominio developer.mozilla.org podrán leer de y escribir datos en este objeto de almacenamiento.
  • globalStorage{{mediawiki.external('\'mozilla.org\'')}} - Todas las páginas web con el dominio mozilla.org podrán tanto leer como escribir de/en este objeto de almacenamiento.
  • globalStorage{{mediawiki.external('\'org\'')}} - Todas las páginas web en todos los dominios .org podrán tanto leer como escribir de/en este objeto de almacenamiento.
  • globalStorage{{mediawiki.external('<span class=\"plain\"></span>')}} - Todas las páginas web de todos los dominios podrán tanto leer como escribir en este objeto de almacenamiento.

Ejemplos:

Todos estos ejemplos necesitan que haya un script insertado (con el siguiente código) en cada página en la que se quiera ver el resultado.

Recordar el nombre de usuario de un usuario para un subdominio en particular que está siendo visitado:

 globalStorage['developer.mozilla.org'].username = "John";

Seguir la pista al número de veces que un usuario visita todas las páginas de un dominio.

 // parseInt must be used since all data is stored as a string
 globalStorage['mozilla.org'].visits =
     parseInt( globalStorage['mozilla.org'].visits || 0 ) + 1;

Recordar todos los sitios web que se visitan:

 globalStorage[''].sites += "," + location.hostname;

Más información:

Más información

Ejemplos

Contenido relacionado

{{ wiki.languages( { "en": "en/DOM/Storage", "pl": "pl/DOM/Storage" } ) }}

Fuente de la revisión

<p>
{{template.DomRef()}}
</p>
<h3 name="Introducci.C3.B3n"> Introducción </h3>
<p>El almacenamiento DOM (DOM Storage) es el nombre dado al conjunto de <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#storage">características relacionadas con el almacenamiento</a> introducidas en la especificación de <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">aplicaciones web 1.0</a>. El almacenamiento DOM está diseñado para facilitar una alternativa amplia, segura y sencilla para almacenar información en cookies. Actualmente sólo está disponible en los navegadores basados en Mozilla, habiendo comenzado con <a href="es/Firefox_2">Firefox 2</a>.
</p>
<div class="note"><b>Nota:</b> El almacenamiento DOM no es lo mismo que <a href="es/Almacenamiento">mozStorage</a> (las interfaces XPCOM de Mozilla para SQLite) o la <a href="es/API_para_guardar_sesiones">API para guardar sesiones</a> (una utilidad de almacenamiento <a href="es/XPCOM">XPCOM</a> para ser usada por extensiones).</div>
<h3 name="Descripci.C3.B3n"> Descripción </h3>
<p>El mecanismo de almacenamiento DOM es el medio a través del cual pares de clave/valor pueden ser almacenadas de forma segura para ser recuperadas y utilizadas más adelante. La meta de este añadido es suministrar un método comprensivo a través del cual puedan construirse aplicaciones interactivas (incluyendo características avanzadas tales como ser capaces de trabajar "offline" durante largos períodos de tiempo).
</p><p>Actualmente sólo los navegadores basados en Mozilla proporcionan una implementación funcional de la especificación del almacenamiento DOM. Sin embargo, Internet Explorer posee una característica similar llamada "<a class="external" href="http://msdn.microsoft.com/workshop/author/behaviors/reference/behaviors/userdata.asp">userData behavior</a>" que permite conservar datos entre múltiples sesiones.
</p><p>El almacenamiento DOM es útil ya que ningún navegador dispone de buenos métodos para conservar cantidades razonables de datos durante un periodo de tiempo. Las <a class="external" href="http://en.wikipedia.org/wiki/HTTP_cookie">cookies de los navegadores</a> tienen una capacidad limitada y no proporcionan soporte para organizar datos persistentes y otros métodos (tales como <a class="external" href="http://www.macromedia.com/support/documentation/en/flashplayer/help/help02.html">almacenamiento local de Flash</a>) necesitan un plugin externo.
</p><p>Una de las primeras aplicaciones hechas públicas que hace uso de la nueva funcionalidad de almacenamiento DOM (además del userData Behavior de Internet Explorer) fue <a class="external" href="http://aaronboodman.com/halfnote/">halfnote</a> (una aplicación para tomar notas) escrita por <a class="external" href="http://aaronboodman.com/">Aaron Boodman</a>. En su aplicación, Aaron enviaba notas hacia el servidor (cuando la conexión a Internet estaba disponible) y simultáneamente las guardaba en local. Esto permitía al usuario escribir notas de modo seguro incluso cuando no disponía de conexión a Internet.
</p><p>Aunque el concepto e implementación presentada en halfnote era en comparación simple, su cración mostró las posibilidades de esta nueva generación de aplicaciones web utilizables tanto con conexión como sin ella.
</p>
<h3 name="Referencias"> Referencias </h3>
<p>Los siguientes objetos globales existen como propiedades de cada <a href="es/DOM/window">objeto <code>window</code></a>. Esto significa que pueden ser accedidas como <code>sessionStorage</code> o <code>window.sessionStorage</code> (Esto es importante ya que se puede usar IFrames para almacenar o acceder a datos adicionales, más allá de lo que está inmediatamente incluido en la página).
</p>
<h4 name="sessionStorage"> <code>sessionStorage</code> </h4>
<p>Este es un objeto global (<code>sessionStorage</code>) que mantiene un área de almacenamiento que está disponible durante la sesión de página. Una sesión de página existe mientras el navegador esté abierto y sobrevive a recargas o restauraciones de páginas. Abrir una página en una nueva pestaña o en una ventana provoca que se cree una nueva sesión.
</p>
<pre class="eval">// Guardar datos en el almacén de la sesión actual
sessionStorage.username = "John";

// Acceder a algunos datos almacenados
alert( "username = " + sessionStorage.username );
</pre>
<p>El objeto <code>sessionStorage</code> es más usado para manejar datos temporales que deberían ser guardados y recuperados si el navegador es recargado accidentalmente.
</p>
<div class="bug"><b>Note:</b> <code>sessionStorage</code> debería además ser capaz de restaurar los datos después de que el navegador haya terminado repentinamente (y haya sido restaurado) pero debido al {{template.Bug(339445)}} esto aún no funciona en Firefox. Mientras esto se arregla, el uso de <code>sessionStorage</code> como una medida preventiva se sirve a debate.</div>
<p><b>Ejemplos:</b>
</p><p>Autoguardado de los contenidos de un campo de texto y, si el navegador se recarga accidentalmente, restauración del contenido del campo de texto para evitar la pérdida de datos.
</p>
<pre class="eval"> // Obtener el campo de texto al que vamos a seguir la pista
 var field = document.getElementById("field");
 
 // Ver si se tiene un valor de autoguardado
 // (esto sólo sucede si la página es actualizada accidentelmente)
 if ( sessionStorage.autosave ) {
     // Restore the contents of the text field
     field.value = sessionStorage.autosave;
 }
 
 // Comprobar los contenidos del campo de texto cada segundo
 setInterval(function(){
     // And save the results into the session storage object
     sessionStorage.autosave = field.value;
 }, 1000);
</pre>
<p><b>Más información:</b>
</p>
<ul><li> <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#sessionstorage">sessionStorage specification</a>
</li></ul>
<h4 name="globalStorage"> <code>globalStorage</code> </h4>
<p>Este es un objeto global (<code>globalStorage</code>) que mantiene múltiples áreas públicas y privadas que pueden ser utilizadas para guardar datos durante un largo período de tiempo (p.e. sobre múltiples páginas y sesiones de navegador).
</p>
<pre class="eval">// Guardar datos a los que sólo pueden acceder scripts del dominio mozilla.org
globalStorage['mozilla.org'].snippet = "&lt;b&gt;Hello&lt;/b&gt;, how are you?";

// Guardar algunos datos que cualquier página web de cualquier dominio puede acceder
globalStorage[<span class="plain">''</span>].favBrowser = "Firefox";
</pre>
<p>Específicamente, el objeto <code>globalStorage</code> proporciona acceso a un número de diferentes objetos de almacenamiento en los que los datos pueden ser guardados. Por ejemplo, si se construye una página web que usa <code>globalStorage</code> en este dominio (developer.mozilla.org) se dispondría de los siguientes objetos de almacenamiento:
</p>
<ul><li> <code>globalStorage{{mediawiki.external('\'developer.mozilla.org\'')}}</code> - Todas las páginas web dentro del subdominio developer.mozilla.org podrán leer de y escribir datos en este objeto de almacenamiento.
</li><li> <code>globalStorage{{mediawiki.external('\'mozilla.org\'')}}</code> - Todas las páginas web con el dominio mozilla.org podrán tanto leer como escribir de/en este objeto de almacenamiento.
</li><li> <code>globalStorage{{mediawiki.external('\'org\'')}}</code> - Todas las páginas web en todos los dominios .org podrán tanto leer como escribir de/en este objeto de almacenamiento.
</li><li> <code>globalStorage{{mediawiki.external('&lt;span class=\"plain\"&gt;&lt;/span&gt;')}}</code> - Todas las páginas web de todos los dominios podrán tanto leer como escribir en este objeto de almacenamiento.
</li></ul>
<p><b>Ejemplos:</b>
</p><p>Todos estos ejemplos necesitan que haya un script insertado (con el siguiente código) en cada página en la que se quiera ver el resultado.
</p><p>Recordar el nombre de usuario de un usuario para un subdominio en particular que está siendo visitado:
</p>
<pre class="eval"> globalStorage['developer.mozilla.org'].username = "John";
</pre>
<p>Seguir la pista al número de veces que un usuario visita todas las páginas de un dominio.
</p>
<pre class="eval"> // parseInt must be used since all data is stored as a string
 globalStorage['mozilla.org'].visits =
     parseInt( globalStorage['mozilla.org'].visits || 0 ) + 1;
</pre>
<p>Recordar todos los sitios web que se visitan:
</p>
<pre class="eval"> globalStorage[<span class="plain">''</span>].sites += "," + location.hostname;
</pre>
<p><b>Más información:</b>
</p>
<ul><li> <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#globalstorage">globalStorage specification</a>
</li></ul>
<h3 name="M.C3.A1s_informaci.C3.B3n"> Más información </h3>
<ul><li> <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/">Web Applications 1.0 Specification <small>(en)</small></a>
</li><li> <a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#storage">Web Applications 1.0 Storage Specification <small>(en)</small></a>
</li><li> <a class="external" href="http://kb.mozillazine.org/Dom.storage.enabled">Enable/Disable DOM Storage in Firefox or SeaMonkey <small>(en)</small></a>
</li></ul>
<h3 name="Ejemplos"> Ejemplos </h3>
<ul><li> <a class="external" href="http://channy.creation.net/work/firefox/domstorage/">Basic DOMStorage Examples <small>(en)</small></a>
</li><li> <a class="external" href="http://aaronboodman.com/halfnote/">halfnote <small>(en)</small></a> - Aplicación para tomar notas que utiliza almacenamiento DOM.
</li></ul>
<h3 name="Contenido_relacionado"> Contenido relacionado</h3>
<ul><li> <a class="external" href="http://es.wikipedia.org/wiki/Cookie">Cookies</a> (<code><a href="es/DOM/document.cookie">document.cookie</a></code>)
</li><li> <a class="external" href="http://www.macromedia.com/support/documentation/en/flashplayer/help/help02.html">Flash Local Storage <small>(en)</small></a>
</li><li> <a class="external" href="http://msdn.microsoft.com/workshop/author/behaviors/reference/behaviors/userdata.asp">Internet Explorer userData behavior <small>(en)</small></a>
</li></ul>
<div class="noinclude">
</div>
{{ wiki.languages( { "en": "en/DOM/Storage", "pl": "pl/DOM/Storage" } ) }}
Revertir a esta revisión