aboutsummaryrefslogtreecommitdiff
path: root/files/es/dom/almacenamiento/index.html
blob: 4b1f0295a0928498e42c05697edefbb1c18b379d (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
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
---
title: Almacenamiento
slug: DOM/Almacenamiento
tags:
  - DOM
  - JavaScript
  - Referencia_DOM_de_Gecko
  - Todas_las_Categorías
  - para_revisar
translation_of: Web/API/Web_Storage_API
---
<p>{{ ApiRef() }}</p>
<h3 id="Introducci.C3.B3n" 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> y ahora detalladas por separado en su propia especificación <a class="external" href="http://dev.w3.org/html5/webstorage/" rel="external nofollow" title="http://dev.w3.org/html5/webstorage/">W3C Web Storage</a>. El almacenamiento DOM está diseñado para facilitar una forma amplia, segura y sencilla para almacenar información alternativa a las cookies. Fue introducido por primera vez en <a href="/es/Firefox_2_para_desarrolladores" title="es/Firefox_2_para_desarrolladores">Firefox 2</a> y <a class="external" href="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html" rel="external nofollow" title="http://developer.apple.com/safari/library/documentation/iPhone/Conceptual/SafariJSDatabaseGuide/Name-ValueStorage/Name-ValueStorage.html">Safari 4</a> .</p>
<div class="note">
 <strong>Nota:</strong> el almacenamiento DOM no es lo mismo que <a href="/es/Almacenamiento" title="es/Almacenamiento">mozStorage</a> (las interfaces XPCOM de Mozilla para SQLite) o la <a href="/es/API_para_guardar_sesiones" title="es/API_para_guardar_sesiones">API para guardar sesiones</a> (una utilidad de almacenamiento <a href="/es/XPCOM" title="es/XPCOM">XPCOM</a> usada por extensiones).</div>
<h3 id="Descripci.C3.B3n" 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 exhaustivo a través del cual puedan construirse aplicaciones interactivas (incluyendo características avanzadas tales como ser capaces de trabajar "sin conexión" durante largos períodos de tiempo).</p>
<p>Actualmente los navegadores basados en Mozilla, Internet Explorer 8+ y Safari 4 y Chrome proporcionan una implementación funcional de la especificación del almacenamiento DOM. Sin embargo, las versiones anteriores a Internet Explorer 8 poseen 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 implementan una forma de 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 creación mostró las posibilidades de esta nueva generación de aplicaciones web utilizables tanto con conexión como sin ella.</p>
<h3 id="Referencias" name="Referencias">Referencia</h3>
<p>Los siguientes objetos globales existen como propiedades de cada <a href="/es/DOM/window" title="es/DOM/window">objeto <code>window</code></a>. Esto significa que se puede acceder a ellas 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 id="sessionStorage" name="sessionStorage"><code>Storage</code></h4>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-1"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Este es un constructor ( <code>Storage</code> ) para todos los objetos de almacenamiento ( <code>sessionStorage</code> y <code>globalStorage[location.hostname]).</code></span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-2"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Al hacer <code>Storage.prototype.removeKey = function(key){ this.removeItem(this.key(key)) }</code> podrías usar luego como atajo a la función <code>removeItem("key")</code> la forma <code>localStorage.removeKey and sessionStorage.removeKey</code>.</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-3"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Los elementos <code>globalStorage</code> no son de tipo <code>Storage</code> , sino <code>StorageObsolete</code> .</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-4"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><code>Storage</code> se define por la <a class="external" href="http://www.google.com/url?q=http%3A%2F%2Fdev.w3.org%2Fhtml5%2Fwebstorage%2F%23storage-0&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNGvCDT1Wf0oh4zXJCIScYRZKlrPAA">interfaz de almacenamiento</a> WhatWG de la siguiente forma:</span></span></p>
<pre class="eval"><span class="goog-gtc-unit" id="goog-gtc-unit-5"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">interface Storage {</span></span>
  <span class="goog-gtc-unit" id="goog-gtc-unit-6"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">readonly attribute unsigned long <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-length" title="http://dev.w3.org/html5/webstorage/#dom-storage-length">length</a>;</span></span>
  <span class="goog-gtc-unit" id="goog-gtc-unit-7"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">[IndexGetter]<a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-key" title="http://dev.w3.org/html5/webstorage/#dom-storage-key">key</a> DOMString (in unsigned long index);</span></span>
  <span class="goog-gtc-unit" id="goog-gtc-unit-8"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">[NameGetter] DOMString <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-getitem" title="http://dev.w3.org/html5/webstorage/#dom-storage-getitem">GetItem</a> (in DOMString key);</span></span>
  <span class="goog-gtc-unit" id="goog-gtc-unit-9"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">[NameSetter] void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-setitem" title="http://dev.w3.org/html5/webstorage/#dom-storage-setitem">setItem</a> (in DOMString key, in DOMString data);</span></span>
  <span class="goog-gtc-unit" id="goog-gtc-unit-10"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">[NameDeleter] void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-removeitem" title="http://dev.w3.org/html5/webstorage/#dom-storage-removeitem">removeItem</a> (in DOMString key);</span></span>
  <span class="goog-gtc-unit" id="goog-gtc-unit-11"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">void <a class="external" href="http://dev.w3.org/html5/webstorage/#dom-storage-clear" title="http://dev.w3.org/html5/webstorage/#dom-storage-clear">clear</a>();</span></span>
<span class="goog-gtc-unit" id="goog-gtc-unit-12"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">};
</span></span></pre>
<p> </p>
<div class="note">
 <strong>Nota: </strong>aunque los valores pueden establecerse y leerse a través del método de acceso de la propiedad de JavaScript estándar, se recomienda el uso de los métodos getItem y setItem.</div>
<div class="note">
 <strong>Nota:</strong> ten en cuenta que todo lo que guardes en cualquiera de los almacenamientos (<em>storages) </em>descritos en esta página se convierte en una cadena a través de su método <code>.toString </code>almacenado anteriormente, por lo que al intentar almacenar un objeto común, se almacenará una cadena <code>"[object Object]" </code>en lugar del objeto o su representación JSON. Usar los métodos de serialización y análisis de JSON nativos que proporciona el navegador es una buena forma bastante común de almacenar objetos en formato cadena.</div>
<h4 id="sessionStorage" 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="brush: js">// Guardar datos en el almacén de la sesión actual
sessionStorage.setItem("username", "John");

// Acceder a algunos datos guardados
alert( "username = " + sessionStorage.getItem("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>
<p>{{ fx_minversion_note("3.5", "Antes de Firefox 3.5, los datos de sessionStorage no se restablecían automáticamente después de recuperarse de un fallo del navegador. A partir de Firefox 3.5, funciona según la especificación.") }}</p>
<p><strong>Ejemplos:</strong></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="brush: js"> // 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 accidentalmente)
 if ( sessionStorage.getItem("autosave")) {
    // Restaurar los contenidos del campo de texto
    field.value = sessionStorage.getItem("autosave");
 }

 // Comprobar los contenidos del campo de texto cada segundo
 setInterval(function(){
    // Y guardar los resultados en el objeto de almacenamiento de sesión
    sessionStorage.setItem("autosave", field.value);
 }, 1000);
</pre>
<p><strong>Más información:</strong></p>
<ul>
 <li><a class="external" href="http://www.whatwg.org/specs/web-apps/current-work/#sessionstorage" title="http://www.whatwg.org/specs/web-apps/current-work/#sessionstorage">Especificación sessionStorage</a></li>
</ul>
<h4 id="globalStorage" name="globalStorage"><code>globalStorage</code></h4>
<p> </p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-40"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">{{ Non-standard_header() }} Este es un objeto global ( <code>globalStorage</code> ) que mantiene múltiples áreas de almacenamiento privado que se pueden utilizar para almacenar los datos durante un largo período de tiempo (por ejemplo, en varias páginas y las sesiones del navegador) .</span></span></p>
<div class="warning">
 <span class="goog-gtc-unit" id="goog-gtc-unit-41"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Nota: <code>globalStorage</code> no es de tipo <code>Storage</code>, sino un objeto de tipo <code>StorageList</code> que contiene a su vez elementos <code>StorageObsolete</code>.</span></span></div>
<pre class="brush: js">// Guardar datos a los que sólo pueden acceder scripts del dominio mozilla.org
globalStorage['mozilla.org'].setItem("snippet", "&lt;b&gt;Hola&lt;/b&gt;, ¿cómo estás?");
</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['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>
</ul>
<p>{{ Fx_minversion_note(3, "Firefox 2 permitía el acceso a objetos de almacenamiento superiores en la jerarquía del dominio al documento actual, pero esto ya no se permite en Firefox 3 por razones de seguridad. Además, se ha eliminado esta adición propuesta a HTML 5 de la especificación en favor de <code>localStorage</code>, que se implementa a partir de Firefox 3.5.") }}</p>
<p><strong>Ejemplos:</strong></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 un usuario para un subdominio en particular que está siendo visitado:</p>
<pre class="brush: js"> globalStorage['developer.mozilla.org'].setItem("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="brush: js"> // parseInt must be used since all data is stored as a string
 globalStorage['mozilla.org'].setItem("visits", parseInt(globalStorage['mozilla.org'].getItem("visits") || 0 ) + 1);
</pre>
<p> </p>
<h4 class="editable" id="localStorage"><span><code>localStorage</code></span></h4>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-61"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr"><code>localStorage</code> es lo mismo que <code>globalStorage[location.hostname]</code>, excepto que está dentro del ámbito de un origen HTML5 (esquema + nombre de servidor + puerto no estándar), y que <code>localStorage</code> es un elemento de tipo <code>Storage</code> a diferencia de <code>globalStorage[location.hostname]</code>, que es de tipo <code>StorageObsolete</code> .</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-62"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Por ejemplo, <a class="external" href="http://www.google.com/url?q=http%3A%2F%2Fexample.com%2F&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNHbmhS24rOBWpzaMcUapS5k_3_-JQ" rel="external nofollow">http://example.com</a> no es capaz de acceder al mismo objeto <code>localStorage</code> que <a class="link-https" href="http://www.google.com/url?q=https%3A%2F%2Fexample.com%2F&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNFdUqh3fgxBA_n6BEUpV3eYKVuHXA" rel="external nofollow">https://example.com</a> pero pueden acceder al mismo objeto <code>globalStorage</code>. <code>localStorage</code> es una interfaz estándar, mientras que <code>globalStorage</code> no es estándar. <code>localStorage</code> fue introducida en Firefox 3.5.</span></span></p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-63"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Ten en cuenta que establecer una propiedad en <code>globalStorage[location.hostname]</code> <strong>no</strong> la establece en <code>localStorage</code> y extender <code>Storage.prototype</code> no afecta a los elementos <code>globalStorage</code>. Esto sólo se hace extendiendo <code>StorageObsolete.prototype</code>.</span></span></p>
<div class="note">
 <span class="goog-gtc-unit" id="goog-gtc-unit-64"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr"><strong>Nota:</strong> cuando el navegador entra en modo de navegación privada, se crea una nueva base de datos temporal para almacenar los datos locales de almacenamiento; </span></span><span class="goog-gtc-unit" id="goog-gtc-unit-64"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">esta base de datos se vacía cuando se sale del modo de navegación privada.</span></span></div>
<div id="section_8">
 <h5 id="Compatibilidad">Compatibilidad</h5>
 <p>Los objetos <code>Storage</code> se han agregado recientemente al estándar, por lo que puede ocurrir que no estén presentes en todos los navegadores. Puedes solucionar esto insertando uno de los siguientes códigos al principio de tus scripts, lo que permitirá el uso del objeto <code>localStorage</code> object en aquellas implementaciones que de forma nativa no lo admitan.</p>
 <p>Este algoritmo es una imitación exacta del objeto <code>localStorage</code>, pero haciendo uso de cookies.</p>
 <pre class="brush: js">if (!window.localStorage) {
  Object.defineProperty(window, "localStorage", new (function () {
    var aKeys = [], oStorage = {};
    Object.defineProperty(oStorage, "getItem", {
      value: function (sKey) { return sKey ? this[sKey] : null; },
      writable: false,
      configurable: false,
      enumerable: false
    });
    Object.defineProperty(oStorage, "key", {
      value: function (nKeyId) { return aKeys[nKeyId]; },
      writable: false,
      configurable: false,
      enumerable: false
    });
    Object.defineProperty(oStorage, "setItem", {
      value: function (sKey, sValue) {
        if(!sKey) { return; }
        document.cookie = escape(sKey) + "=" + escape(sValue) + "; path=/";
      },
      writable: false,
      configurable: false,
      enumerable: false
    });
    Object.defineProperty(oStorage, "length", {
      get: function () { return aKeys.length; },
      configurable: false,
      enumerable: false
    });
    Object.defineProperty(oStorage, "removeItem", {
      value: function (sKey) {
        if(!sKey) { return; }
        var sExpDate = new Date();
        sExpDate.setDate(sExpDate.getDate() - 1);
        document.cookie = escape(sKey) + "=; expires=" + sExpDate.toGMTString() + "; path=/";
      },
      writable: false,
      configurable: false,
      enumerable: false
    });
    this.get = function () {
      var iThisIndx;
      for (var sKey in oStorage) {
        iThisIndx = aKeys.indexOf(sKey);
        if (iThisIndx === -1) { oStorage.setItem(sKey, oStorage[sKey]); }
        else { aKeys.splice(iThisIndx, 1); }
        delete oStorage[sKey];
      }
      for (aKeys; aKeys.length &gt; 0; aKeys.splice(0, 1)) { oStorage.removeItem(aKeys[0]); }
      for (var iCouple, iKey, iCouplId = 0, aCouples = document.cookie.split(/\s*;\s*/); iCouplId &lt; aCouples.length; iCouplId++) {
        iCouple = aCouples[iCouplId].split(/\s*=\s*/);
        if (iCouple.length &gt; 1) {
          oStorage[iKey = unescape(iCouple[0])] = unescape(iCouple[1]);
          aKeys.push(iKey);
        }
      }
      return oStorage;
    };
    this.configurable = false;
    this.enumerable = true;
  })());
}
</pre>
 <div class="note">
  <strong>Nota:</strong> el tamaño máximo de datos que pueden guardarse está bastante restringido por el uso de cookies. Con este algoritmo, usa las funciones <code>localStorage.setItem()</code> y <code>localStorage.removeItem()</code> para agregar, cambiar o eliminar una clave. Usar los métodos <code>localStorage.tuClave = tuValor;</code> y <code>delete localStorage.tuClave;</code> para establecer o eliminar una clave <strong>no es muy seguro con este código</strong>. También puedes cambiar su nombre y usarlo para administrar las cookies de un documento independientemente del objeto localStorage.</div>
 <p>Aquí tienes otra imitación, menos exacta, del objeto <code>localStorage</code>. Es mucho más simple  que el anterior, pero es compatible con los navegadores antiguos como Internet Explorer &lt; 8. También usa cookies.</p>
 <pre class="brush: js">if (!window.localStorage) {
  window.localStorage = {
    getItem: function (sKey) {
      if (!sKey || !this.hasOwnProperty(sKey)) { return null; }
      return unescape(document.cookie.replace(new RegExp("(?:^|.*;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&amp;") + "\\s*\\=\\s*((?:[^;](?!;))*[^;]?).*"), "$1"));
    },
    key: function (nKeyId) { return unescape(document.cookie.replace(/\s*\=(?:.(?!;))*$/, "").split(/\s*\=(?:[^;](?!;))*[^;]?;\s*/)[nKeyId]); },
    setItem: function (sKey, sValue) {
      if(!sKey) { return; }
      document.cookie = escape(sKey) + "=" + escape(sValue) + "; path=/";
      this.length = document.cookie.match(/\=/g).length;
    },
    length: 0,
    removeItem: function (sKey) {
      if (!sKey || !this.hasOwnProperty(sKey)) { return; }
      var sExpDate = new Date();
      sExpDate.setDate(sExpDate.getDate() - 1);
      document.cookie = escape(sKey) + "=; expires=" + sExpDate.toGMTString() + "; path=/";
      this.length--;
    },
    hasOwnProperty: function (sKey) { return (new RegExp("(?:^|;\\s*)" + escape(sKey).replace(/[\-\.\+\*]/g, "\\$&amp;") + "\\s*\\=")).test(document.cookie); }
  };
  window.localStorage.length = (document.cookie.match(/\=/g) || window.localStorage).length;
}
</pre>
 <div class="note">
  <strong>Nota:</strong> el tamaño máximo de datos que pueden guardarse está bastante restringido por el uso de cookies. Con este algoritmo, usa las funciones <code>localStorage.getItem()</code>, <code>localStorage.setItem()</code> y <code>localStorage.removeItem()</code> para agregar, cambiar o eliminar una clave. Usar los métodos <code>localStorage.tuClave</code> para obtener, establecer o eliminar una clave <strong>no es muy seguro con este código</strong>. También puedes cambiar su nombre y usarlo para administrar las cookies de un documento independientemente del objeto localStorage.</div>
 <h3 class="editable" id="Lugar_de_almacenamiento_y_borrado_de_datos"><span><span class="goog-gtc-unit" id="goog-gtc-unit-65"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Lugar de almacenamiento y borrado de datos</span></span></span></h3>
 <p><span class="goog-gtc-unit" id="goog-gtc-unit-66"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Los datos de almacenamiento DOM se guardan en el <a class="external" href="http://kb.mozillazine.org/Webappsstore.sqlite" rel="external nofollow" title="http://kb.mozillazine.org/Webappsstore.sqlite">archivo webappsstore.sqlite</a> de la carpeta del perfil.</span></span></p>
 <ul>
  <li><span class="goog-gtc-unit" id="goog-gtc-unit-67"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Almacenamiento DOM se puede borrar a través de "Herramientas -&gt; Borrar Historial reciente -&gt; Cookies" cuando el rango de tiempo es "Todo" (a través de nsICookieManager:: removeAll)</span></span>
   <ul>
    <li><span class="goog-gtc-unit" id="goog-gtc-unit-68"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Pero no cuando se especifica otro intervalo de tiempo: ( <a class="link-https" href="http://www.google.com/url?q=https%3A%2F%2Fbugzilla.mozilla.org%2Fshow_bug.cgi%3Fid%3D527667&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNEMF8WI1pO7c8uQnfOUS0KITnlz5Q" rel="external nofollow">bug 527667</a> )</span></span></li>
    <li><span class="goog-gtc-unit" id="goog-gtc-unit-69"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">No aparece en Herramientas -&gt; Opciones -&gt; Privacidad -&gt; Eliminar cookies individuales ( <a class="link-https" href="http://www.google.com/url?q=https%3A%2F%2Fbugzilla.mozilla.org%2Fshow_bug.cgi%3Fid%3D506692&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNH3d0Etkixvdpdvd_u6gywZoEmsMQ" rel="external nofollow">bug 506692</a> )</span></span></li>
   </ul>
  </li>
  <li><span class="goog-gtc-unit" id="goog-gtc-unit-70"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">El almacenamiento DOM <strong>no</strong> se elimina a través de Herramientas -&gt; Opciones -&gt; Avanzado -&gt; Red -&gt; Datos en modo sin conexión -&gt; Limpiar ahora.</span></span></li>
  <li><span class="goog-gtc-unit" id="goog-gtc-unit-71"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">No aparece en la lista "Herramientas -&gt; Opciones -&gt; Avanzado -&gt; Red -&gt; Datos en modo sin conexión", a menos que el sitio también utilice la caché sin conexión.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-72"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Si el sitio aparece en esa lista, los datos de almacenamiento DOM se eliminan junto con la <a href="/en/Using_Application_Cache" rel="internal" title="https://developer.mozilla.org/en/Using_Application_Cache">memoria caché sin conexión</a> cuando se hace clic en el botón Eliminar.</span></span></li>
 </ul>
 <p><span class="goog-gtc-unit" id="goog-gtc-unit-73"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr">Consulta también <a href="/en/Using_Application_Cache#Storage_location_and_clearing_the_offline_cache" rel="internal" title="https://developer.mozilla.org/en/Using_Application_Cache#Storage_location_and_clearing_the_offline_cache">borrar la caché de recursos en modo sin conexión</a> .</span></span></p>
</div>
<h3 id="M.C3.A1s_informaci.C3.B3n" name="M.C3.A1s_informaci.C3.B3n"><span class="goog-gtc-unit" id="goog-gtc-unit-74"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Más información</span></span></h3>
<ul>
 <li><span class="goog-gtc-unit" id="goog-gtc-unit-75"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr"><a class="external" href="http://www.w3.org/TR/webstorage/" rel="external nofollow" title="http://www.w3.org/TR/webstorage/">Almacenamiento web</a> (W3C Web Grupo de trabajo sobre aplicaciones web)</span></span></li>
 <li><a class="external" href="http://kb.mozillazine.org/Dom.storage.enabled" rel="external nofollow" title="http://kb.mozillazine.org/Dom.storage.enabled"><span class="goog-gtc-unit" id="goog-gtc-unit-76"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr">Activar / Desactivar almacenamiento DOM en Firefox o SeaMonkey</span></span></a></li>
</ul>
<h3 id="Ejemplos" name="Ejemplos"><span class="goog-gtc-unit" id="goog-gtc-unit-77"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Ejemplos</span></span></h3>
<ul>
 <li><span class="goog-gtc-unit" id="goog-gtc-unit-78"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><a class="external" href="http://www.diveintojavascript.com/tutorials/web-storage-tutorial-creating-an-address-book-application" rel="external nofollow" title="http://www.diveintojavascript.com/tutorials/web-storage-tutorial-creating-an-address-book-application">Tutorial de almacenamiento web JavaScript: cómo crear una aplicación de la libreta de direcciones</a>. Práctico tutorial que describe cómo utilizar la API de almacenamiento web mediante la creación de una aplicación sencilla de la libreta de direcciones.</span></span></li>
 <li><span class="goog-gtc-unit" id="goog-gtc-unit-79"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><a class="external" href="http://hacks.mozilla.org/2010/01/offline-web-applications/" rel="external nofollow" title="http://hacks.mozilla.org/2010/01/offline-web-applications/">Aplicaciones web en modo desconexión</a> en hacks.mozilla.org: muestra una demo de la aplicación en modo desconexión y explica cómo funciona.</span></span></li>
 <li><span class="goog-gtc-unit" id="goog-gtc-unit-80"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><a class="external" href="http://noteboard.eligrey.com/" rel="external nofollow" title="http://noteboard.eligrey.com/">Noteboard</a>: aplicación para escritura de notas que almacena todos los datos en local.</span></span></li>
 <li><span class="goog-gtc-unit" id="goog-gtc-unit-81"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><a class="external" href="http://github.com/eligrey/jData-host" rel="external nofollow" title="http://github.com/eligrey/jData-host">JData</a>: una interfaz de objetos compartidos localStorage a la que cualquier sitio web en Internet puede acceder y que funciona en Firefox 3 +, Webkit 3.1.2 + versiones estables ("nightlies) y IE8.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-82"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Piensa en ella como pseudo-globalStorage [""], pero el acceso de escritura necesita la confirmación del usuario.</span></span></li>
 <li><span class="goog-gtc-unit" id="goog-gtc-unit-83"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><a class="external" href="http://codebase.es/test/webstorage.html" rel="external nofollow" title="http://codebase.es/test/webstorage.html">Ejemplo de localStorage en HTML 5 </a>.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-84"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Un ejemplo de localStorage muy sencillo y fácil de entender.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-85"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Guarda y recupera los textos y muestra una lista de elementos guardados.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-86"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Probado en Firefox 3 o superior.</span></span></li>
 <li><span class="goog-gtc-unit" id="goog-gtc-unit-87"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style=""><a class="external" href="http://upload.jonathanwilsson.com/html5/sessionstorage.php" rel="external nofollow" title="http://upload.jonathanwilsson.com/html5/sessionstorage.php">Almacenamiento de sesión en HTML5</a>.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-88"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Un ejemplo muy simple de almacenamiento de sesión.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-89"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">También incluye un ejemplo en almacenamiento local.</span></span> <span class="goog-gtc-unit" id="goog-gtc-unit-90"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Probado en Firefox 3.6 o superior.</span></span></li>
</ul>
<h3 id="Compatibilidad_de_los_navegadores">Compatibilidad de los navegadores</h3>
<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>localStorage</td>
    <td>4</td>
    <td>3.5</td>
    <td>8</td>
    <td>10.50</td>
    <td>4</td>
   </tr>
   <tr>
    <td>sessionStorage</td>
    <td>5</td>
    <td>2</td>
    <td>8</td>
    <td>10.50</td>
    <td>4</td>
   </tr>
   <tr>
    <td>globalStorage</td>
    <td>{{ CompatNo() }}</td>
    <td>2</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>Característica</th>
    <th>Android</th>
    <th>Firefox Mobile (Gecko)</th>
    <th>IE Phone</th>
    <th>Opera Mobile</th>
    <th>Safari Mobile</th>
   </tr>
   <tr>
    <td>Compatibilidad básica</td>
    <td>{{ CompatUnknown() }}</td>
    <td>{{ CompatUnknown() }}</td>
    <td>{{ CompatUnknown() }}</td>
    <td>{{ CompatUnknown() }}</td>
    <td>{{ CompatUnknown() }}</td>
   </tr>
  </tbody>
 </table>
</div>
<p>Todos los navegadores tienen diferentes niveles de capacidad tanto para local- como para sessionStorage. Aquí puedes ver un<a class="external" href="http://dev-test.nemikor.com/web-storage/support-test/" title="http://dev-test.nemikor.com/web-storage/support-test/"> resumen detallado de todas las capacidades de almacenamiento de los distintos navegadores</a>.</p>
<h3 id="Contenido_relacionado" name="Contenido_relacionado"><span class="goog-gtc-unit" id="goog-gtc-unit-91"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Contenido relacionado</span></span></h3>
<ul>
 <li><span class="goog-gtc-unit" id="goog-gtc-unit-92"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style=""><a class="external" href="http://www.google.com/url?q=http%3A%2F%2Fen.wikipedia.org%2Fwiki%2FHTTP_cookie&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNFACogcWPyUjw22LvVhbEL5L07xEA">Cookies HTTP</a> ( <a><code>document.cookie</code></a> )</span></span></li>
 <li><a class="external" href="http://www.google.com/url?q=http%3A%2F%2Fwww.macromedia.com%2Fsupport%2Fdocumentation%2Fen%2Fflashplayer%2Fhelp%2Fhelp02.html&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNFrtvzw9ttNpzuCXBX_Hlq3o20cYA"><span class="goog-gtc-unit" id="goog-gtc-unit-93"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">Almacenamiento local de Flash</span></span></a></li>
 <li><a class="external" href="http://www.google.com/url?q=http%3A%2F%2Fmsdn2.microsoft.com%2Fen-us%2Flibrary%2Fms531424.aspx&amp;sa=D&amp;sntz=1&amp;usg=AFQjCNFaRBrB2GGggww2L9dRDlUWDBm9IQ"><span class="goog-gtc-unit" id="goog-gtc-unit-94"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">Comportamiento userData en Internet Explorer </span></span></a></li>
 <li><a><span class="goog-gtc-unit" id="goog-gtc-unit-95"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">nsIDOMStorageEventObsolete</span></span></a></li>
 <li><a><span class="goog-gtc-unit" id="goog-gtc-unit-96"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">StorageEvent</span></span></a></li>
</ul>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-97"><span class="goog-gtc-translatable goog-gtc-from-mt" dir="ltr" style="">{{ HTML5ArticleTOC () }}</span></span></p>
<p> </p>
<p> </p>
<p><span class="goog-gtc-unit" id="goog-gtc-unit-98"><span class="goog-gtc-translatable goog-gtc-from-human" dir="ltr" style="">{{ languages( { "en": "en/DOM/Storage", "fr": "fr/DOM/Storage", "ja": "ja/DOM/Storage", "pl": "pl/DOM/Storage", "zh-cn": "cn/DOM/Storage" } ) }}</span></span></p>