unslug es: move

2 files changed, 418 insertions, 0 deletions

diff --git a/files/es/web/api/web_storage_api/index.html b/files/es/web/api/web_storage_api/index.html
new file mode 100644
index 0000000000..26a858d254
--- /dev/null
+++ b/files/es/web/api/web_storage_api/index.html
@@ -0,0 +1,146 @@
+---
+title: API de almacenamiento web
+slug: Web/API/API_de_almacenamiento_web
+tags:
+  - API
+  - API de almacenamiento web
+  - Almacenamiento web
+  - Storage
+  - localStorage
+  - sessionStorage
+translation_of: Web/API/Web_Storage_API
+---
+<p>{{DefaultAPISidebar("Web Storage API")}}</p>
+
+<p>La <strong>API de almacenamiento web</strong> proporciona los mecanismos mediante los cuales el navegador puede almacenar información de tipo clave/valor, de una forma mucho más intuitiva que utilizando cookies.</p>
+
+<h2 id="Almacenamiento_web_conceptos_y_uso"><strong>Almacenamiento web, conceptos y uso</strong></h2>
+
+<p>Los dos mecanismos en el almacenamiento web son los siguientes:</p>
+
+<ul>
+ <li><strong><code>sessionStorage</code> </strong>mantiene un área de almacenamiento separada para cada origen que está disponible mientras dure la sesión de la página (mientras el navegador esté abierto, incluyendo recargas de página y restablecimientos).</li>
+ <li><strong><code>localStorage</code> </strong>hace lo mismo, pero persiste incluso cuando el navegador se cierre y se reabra.</li>
+</ul>
+
+<p>Estos mecanismos están disponibles mediante las propiedades <a href="https://developer.mozilla.org/es/docs/Web/API/Window/sessionStorage" title="La propiedad sessionStorage permite acceder a un objeto Storage asociado a la sesión actual. La propiedad sessionStorage es similar a localStorage, la única diferencia es que la información almacenada en localStorage no posee tiempo de expiración, por el contrario la información almacenada en sessionStorage es eliminada al finalizar la sesion de la página. La sesión de la página perdura mientras el navegador se encuentra abierto, y se mantiene por sobre las recargas y reaperturas de la página. Abrir una página en una nueva pestaña o ventana iniciará una nueva sesión, lo que difiere en la forma en que trabajan las cookies de sesión."><code>Window.sessionStorage</code></a> y  <a href="https://developer.mozilla.org/es/docs/Web/API/Window/localStorage" title="La propiedad localStorage te permite acceder al objeto local Storage. localStorage es similar a sessionStorage. La única diferencia es que, mientras los datos almacenados en localStorage no tienen fecha de expiración, los datos almacenados en sessionStorage son eliminados cuando finaliza la sesion de navegación - lo cual ocurre cuando se cierra el navegador."><code>Window.localStorage</code></a> (dicho con más precisión, en navegadores con soporte, el objeto <code>Window</code> implementa los objetos  <code>WindowLocalStorage</code> y <code>WindowSessionStorage</code>, en los cuales se basan las propiedades <code>localStorage</code> y <code>sessionStorage</code>). Al invocar uno de éstos, se creará una instancia del objeto <a href="https://developer.mozilla.org/es/docs/Web/API/Storage" title="La interfaz Storage de la API de almacenamiento web provee acceso al almacenamiento de la sesión o al almacenamiento local para un dominio en particular, permitiéndote por ejemplo añadir, modificar o eliminar elementos de dato almacenados."><code>Storage</code></a>, a través del cual los datos pueden ser creados, recuperados y eliminados. sessionStorage y localStorage utilizan un objeto de almacenamiento diferente según su origen — funcionan y son controlados por separado.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Acceder al Almacenamiento web desde IFrames de terceros está prohibido si el usuario tiene <a href="https://support.mozilla.org/en-US/kb/disable-third-party-cookies">deshabilitadas las cookies de terceros</a> (Firefox implementa este comportamiento a partir de la <a href="/en-US/docs/Mozilla/Firefox/Releases/43">versión 43</a>).</p>
+</div>
+
+<div class="note">
+<p><strong>Nota:</strong> El almacenamiento web no es lo mismo que <a href="/en-US/docs/Storage" title="Storage">mozStorage</a> (interfaces Mozilla's XPCOM para SQLite) o la <a href="/en-US/docs/Session_store_API" title="Session_store_API">Session store API</a> (una utilidad de almacenamiento <a href="/en-US/docs/XPCOM" title="XPCOM">XPCOM</a> usada por extensiones).</p>
+</div>
+
+<h2 id="Interfaces_de_almacenamiento_web">Interfaces de almacenamiento web</h2>
+
+<dl>
+ <dt>{{domxref("Storage")}}</dt>
+ <dd>Permite crear, recuperar y eliminar datos de un dominio y tipo de almacenamiento (sesión o local) específicos.</dd>
+ <dt>{{domxref("Window")}}</dt>
+ <dd>La API de almacenamiento web extiende el objeto {{domxref("Window")}} con dos nuevas propiedades — {{domxref("Window.sessionStorage")}} y {{domxref("Window.localStorage")}} — que proveen acceso a la sesión actual del dominio y a objetos {{domxref("Storage")}} locales, respectivamente. También ofrece un manejador de evento {{domxref("Window.onstorage")}} que se dispara cuando un área de la memoria cambia (por ejemplo, cuando se almacena un nuevo elemento).</dd>
+ <dt>{{domxref("StorageEvent")}}</dt>
+ <dd>El evento <code>storage</code> se dispara en el objeto <code>Window</code> de un documento cuando un área de la memoria cambia.</dd>
+</dl>
+
+<h2 id="Ejemplos">Ejemplos</h2>
+
+<p>Para ilustrar algunos usos típicos del almacenamiento web, hemos creado un ejemplo simple, llamado <a href="https://github.com/mdn/web-storage-demo">Demo de almacenamiento web</a>. La <a href="http://mdn.github.io/web-storage-demo/">página de inicio</a> proporciona controles que puedes utilizar para personalizar el color, la tipografía y la imagen decorativa. Cuando seleccionas una opción diferente, la página se actualiza instantáneamente; además, tus opciones se almacenan en <code>localStorage</code>, de forma que si abandonas la página y la vuelves a cargar, tus opciones son recordadas.</p>
+
+<p>También creamos una<a href="http://mdn.github.io/web-storage-demo/event.html"> página de salida del evento</a> — si cargas esta página en otra pestaña y luego haces cambios a tus opciones en la página de inicio, verás que se muestra la información almacenada actualizada puesto que se dispara un evento {{event("StorageEvent")}}.</p>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('Web Storage')}}</td>
+   <td>{{Spec2('Web Storage')}}</td>
+   <td> </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores"><strong>Compatibilidad </strong>de 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>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>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Caracteristica</th>
+   <th>Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Todos los navegadores tienen distintos niveles de capacidad tanto para localStorage como para sessionStorage. Aquí está una <a class="external external-icon" href="http://dev-test.nemikor.com/web-storage/support-test/" rel="noopener" title="http://dev-test.nemikor.com/web-storage/support-test/">análisis detallado de todas las capacidades de almacenamiento de diferentes navegadores</a>.</p>
+
+<div class="note">
+<p><strong>Nota: </strong>Desde iOS 5.1, Safari Mobile almacena los datos de localStorage en la carpeta de caché, la cual está sujeta a limpiezas ocasionales, a petición del sistema operativo, típicamente cuando el espacio es reducido.</p>
+</div>
+
+<h2 id="Navegación_privada_Modo_incógnito">Navegación privada / Modo incógnito</h2>
+
+<p>La mayoría de los navegadores de hoy en día soportan una opción de privacidad llamada  'Modo incógnito', 'Navegación privada', o algo similar, que básicamente se asegura de que la sesión de navegación no deje rastros después de que el navegador se cierra. Esto es fundamentalmente incompatible con el almacenamiento web por obvias razones. Por ello, muchos navegadores están experimentando con diferentes escenarios para lidiar con esta incompatibilidad.</p>
+
+<p>La mayoría de los navegadores han optado por una estrategia donde las API de almacenamiento siguen disponibles y aparentemente completamente funcionales, con la única gran diferencia de que todos los datos almacenados son eliminados después de cerrar el navegador. Para estos navegadores aún hay diferentes interpretaciones sobre qué debería hacerse con los datos almacenados existentes (de una sesión de navegación normal). ¿Deberían de estar disponibles para lectura cuando esté en modo privado? Entonces, hay algunos navegadores, sobre todo Safari, que han optado por una solución donde el almacenamiento está disponible, pero vacío, y tiene un cupo de 0 bytes asignado, por lo que se vuelve imposible usar esta memoria para escribir datos.</p>
+
+<p>Los desarrolladores deberían de estar conscientes de estas diferentes implementaciones y tenerlas en cuenta a la hora de desarrollar aplicaciones web que depende de la API de almacenamiento web. Para más información, échale un vistazo a<a href="https://blog.whatwg.org/tag/localstorage"> esta entrada de blog WHATWG</a> que trata específicamente con este tema.</p>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API">Usando la API de almacenamiento web</a></li>
+</ul>
diff --git a/files/es/web/api/web_storage_api/using_the_web_storage_api/index.html b/files/es/web/api/web_storage_api/using_the_web_storage_api/index.html
new file mode 100644
index 0000000000..086af18610
--- /dev/null
+++ b/files/es/web/api/web_storage_api/using_the_web_storage_api/index.html
@@ -0,0 +1,272 @@
+---
+title: Usando la API de almacenamiento web
+slug: Web/API/API_de_almacenamiento_web/Usando_la_API_de_almacenamiento_web
+tags:
+  - API
+  - API de almacenamiento web
+  - Guía
+  - localStorage
+  - sessionStorage
+translation_of: Web/API/Web_Storage_API/Using_the_Web_Storage_API
+---
+<div>{{DefaultAPISidebar("Web Storage API")}}</div>
+
+<div class="summary">
+<p>La API de almacenamiento web proporciona los mecanismos mediante los cuales el navegador puede almacenar información de tipo clave/valor, de una forma mucho más intuitiva que utilizando cookies.</p>
+
+<p>Este artículo proporciona una guía general de cómo usar esta tecnología.</p>
+</div>
+
+<h2 id="Conceptos_básicos">Conceptos básicos</h2>
+
+<p>Los objetos de almacenamiento son simples almacenes de clave/valor, similares a objetos, pero que permanecen intactos cuando la página se recarga. Las claves y los valores siempre son cadenas de texto (fíjate que las claves con enteros se convierten automáticamente a cadenas, tal y como lo hacen los objetos). Puedes acceder a estos valores como un objeto, o con los métodos {{domxref("Storage.getItem()")}} y {{domxref("Storage.setItem()")}}. Estas tres líneas modifican el valor de colorSetting de la misma manera:</p>
+
+<pre class="brush: js notranslate" style="white-space: pre;">localStorage.colorSetting = '#a4509b';
+localStorage['colorSetting'] = '#a4509b';
+localStorage.setItem('colorSetting', '#a4509b');</pre>
+
+<div class="note">
+<p><strong>Nota</strong>: Se recomiendo usar la API de almacenamiento web (<code>setItem</code>, <code>getItem</code>, <code>removeItem</code>, <code>key</code>, <code>length</code>) para prevenir las dificultades asociadas al uso de simples objetos como almacenes de valores llave/valor.</p>
+</div>
+
+<p>Los dos mecanismos en el almacenamiento web son los siguientes:</p>
+
+<ul>
+ <li><strong><code>sessionStorage</code> </strong>mantiene un área de almacenamiento separada para cada origen que está disponible mientras dure la sesión de la página (mientras el navegador esté abierto, incluyendo recargas de página y restablecimientos).</li>
+ <li><strong><code>localStorage</code> </strong>hace lo mismo, pero persiste incluso cuando el navegador se cierre y se reabra.</li>
+</ul>
+
+<p>Estos mecanismos están disponibles mediante las propiedades <a href="https://developer.mozilla.org/es/docs/Web/API/Window/sessionStorage" title="La propiedad sessionStorage permite acceder a un objeto Storage asociado a la sesión actual. La propiedad sessionStorage es similar a localStorage, la única diferencia es que la información almacenada en localStorage no posee tiempo de expiración, por el contrario la información almacenada en sessionStorage es eliminada al finalizar la sesion de la página. La sesión de la página perdura mientras el navegador se encuentra abierto, y se mantiene por sobre las recargas y reaperturas de la página. Abrir una página en una nueva pestaña o ventana iniciará una nueva sesión, lo que difiere en la forma en que trabajan las cookies de sesión."><code>Window.sessionStorage</code></a> y  <a href="https://developer.mozilla.org/es/docs/Web/API/Window/localStorage" title="La propiedad localStorage te permite acceder al objeto local Storage. localStorage es similar a sessionStorage. La única diferencia es que, mientras los datos almacenados en localStorage no tienen fecha de expiración, los datos almacenados en sessionStorage son eliminados cuando finaliza la sesion de navegación - lo cual ocurre cuando se cierra el navegador."><code>Window.localStorage</code></a> (dicho con más precisión, en navegadores con soporte, el objeto <code>Window</code> implementa los objetos  <code>WindowLocalStorage</code> y <code>WindowSessionStorage</code>, en los cuales se basan las propiedades <code>localStorage</code> y <code>sessionStorage</code>). Al invocar uno de éstos, se creará una instancia del objeto <a href="https://developer.mozilla.org/es/docs/Web/API/Storage" title="La interfaz Storage de la API de almacenamiento web provee acceso al almacenamiento de la sesión o al almacenamiento local para un dominio en particular, permitiéndote por ejemplo añadir, modificar o eliminar elementos de dato almacenados."><code>Storage</code></a>, a través del cual los datos pueden ser creados, recuperados y eliminados. sessionStorage y localStorage utilizan un objeto de almacenamiento diferente según su origen — funcionan y son controlados por separado.</p>
+
+<p>Así que, por ejemplo, si en un inicio se llama a <code>localStorage</code> en un documento, esto devolverá un objeto {{domxref("Storage")}}; llamar a <code>sessionStorage</code> en un documento devolverá un objeto {{domxref("Storage")}} diferente. Ambos objetos se pueden manipular de la misma forma, pero separados.</p>
+
+<h2 id="Detectar_la_característica_localStorage">Detectar la característica localStorage</h2>
+
+<p>Para poder usar localStorage, debemos de verificar que tiene soporte y que está disponible en la sesión del buscador actual.</p>
+
+<h3 id="Probar_la_disponibilidad">Probar la disponibilidad</h3>
+
+<div class="blockIndicator note">
+<p>Nota: esta API está disponible en las versiones actuales de todos los navegadores principales. La prueba de disponibilidad es necesaria sólo si debes soportar navegadores muy antiguos, como Internet Explorer 6 o 7, o en las circunstancias limitadas descritas más abajo.</p>
+</div>
+
+<p>Los buscadores que soportan localStorage tienen una propiedad en el objeto window que se llama localStorage. Sin embargo, por varias razones, el sólo asegurarse de que la propiedad existe puede arrojar excepciones. El que localStorage exista no es garantía suficiente de que en verdad esté disponible, puesto que varios buscadores ofrecen configuraciones que lo inhabilitan. Así que un buscador puede <em>soportar </em>localStorage, pero puede no hacerlo <em>disponible </em>para los scripts en la página. Un ejemplo de esto es Safari, que en el modo de búsqueda privada ofrece un objeto localStorage vacío con un cupo de 0, por lo que es inutilizable. Sin embargo, es posible que aún así obtengamos un QuotaExceededError legítimo, lo que significa que ya usamos todo el espacio de almacenamiento disponible, aunque el almacenamiento esté, de hecho, <em>disponible</em>. Nuestra detección de la característica debe de tomar en cuenta estos escenarios.</p>
+
+<p>Esta función detecta si localStorage tiene soporte y está disponible:</p>
+
+<pre class="brush: js notranslate">function storageAvailable(type) {
+    try {
+        var storage = window[type],
+            x = '__storage_test__';
+        storage.setItem(x, x);
+        storage.removeItem(x);
+        return true;
+    }
+    catch(e) {
+        return e instanceof DOMException &amp;&amp; (
+            // everything except Firefox
+            e.code === 22 ||
+            // Firefox
+            e.code === 1014 ||
+            // test name field too, because code might not be present
+            // everything except Firefox
+            e.name === 'QuotaExceededError' ||
+            // Firefox
+            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &amp;&amp;
+            // acknowledge QuotaExceededError only if there's something already stored
+            storage.length !== 0;
+    }
+}</pre>
+
+<p>Y aquí se muestra cómo usarla:</p>
+
+<pre class="brush: js notranslate">if (storageAvailable('localStorage')) {
+  // Yippee! We can use localStorage awesomeness
+}
+else {
+  // Too bad, no localStorage for us
+}</pre>
+
+<p>También puedes probar sessionStorage invocando <code>storageAvailable('sessionStorage')</code>.</p>
+
+<p>Aquí puedes ver una <a href="https://gist.github.com/paulirish/5558557">breve historia de la detección de la característica localStorage</a>.</p>
+
+<h2 id="Ejemplo">Ejemplo</h2>
+
+<p>Para ilustrar un uso típico de almacenamiento web, creamos un ejemplo simple que llamamos <strong>Demo de almacenamiento web</strong>. La <a href="https://mdn.github.io/dom-examples/web-storage/">página de inicio</a> proporciona unos controles que se pueden usar para personalizar el color, la tipografía y la imagen decorativa:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9685/landing.png" style="display: block; height: 482px; margin: 0px auto; width: 700px;">Cuando seleccionas una opción diferente, la página se actualiza instantáneamente; además, tus opciones se almacenan en <code>localStorage</code>, de forma que si abandonas la página y la vuelves a cargar, tus opciones son recordadas.</p>
+
+<p>También creamos una <a href="https://mdn.github.io/dom-examples/web-storage/event.html">página de salida del evento</a> — si cargas esta página en otra pestaña y luego haces cambios a tus opciones en la página de inicio, verás que se muestra la información almacenada actualizada puesto que se dispara un {{domxref("StorageEvent")}}.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/9687/event-output.png" style="display: block; height: 482px; margin: 0px auto; width: 700px;"></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Puedes ver las páginas de ejemplo usando los links de arriba y también puedes <a href="https://github.com/mdn/dom-examples/tree/master/web-storage">ver el código fuente.</a></p>
+</div>
+
+<h3 id="Probar_si_la_memoria_tiene_valores">Probar si la memoria tiene valores</h3>
+
+<p>En el inicio de <a href="https://github.com/mdn/dom-examples/blob/master/web-storage/main.js">main.js</a>, probamos si el objeto ya tiene valores (es decir, si la página ya fue visitada):</p>
+
+<pre class="brush: js notranslate">if(!localStorage.getItem('bgcolor')) {
+  populateStorage();
+} else {
+  setStyles();
+}</pre>
+
+<p>El método {{domxref("Storage.getItem()")}} se usa para obtener un dato de la memoria; en este caso, estamos probando si el dato <code>bgcolor</code> existe; si no, corremos <code>populateStorage()</code> para añadir los valores personalizados actuales a la memoria. Si ya hay valores guardados, corremos <code>setStyles()</code> para actualizar el estilo de la página con los valores almacenados.</p>
+
+<p><strong>Nota</strong>: También puedes usar {{domxref("Storage.length")}} para probar si el objeto de almacenamiento está vació o no.</p>
+
+<h3 id="Obtener_valores_de_la_memoria">Obtener valores de la memoria</h3>
+
+<p>Como dijimos arriba, los valores se pueden recuperar de la memoria usando {{domxref("Storage.getItem()")}}. Este método usa la llave del dato como argumento y devuelve el valor. Por ejemplo:</p>
+
+<pre class="brush: js notranslate">function setStyles() {
+  var currentColor = localStorage.getItem('bgcolor');
+  var currentFont = localStorage.getItem('font');
+  var currentImage = localStorage.getItem('image');
+
+  document.getElementById('bgcolor').value = currentColor;
+  document.getElementById('font').value = currentFont;
+  document.getElementById('image').value = currentImage;
+
+  htmlElem.style.backgroundColor = '#' + currentColor;
+  pElem.style.fontFamily = currentFont;
+  imgElem.setAttribute('src', currentImage);
+}</pre>
+
+<p>Aquí, en las primeras tres líneas tomamos los valores del almacenamiento local. Después, fijamos los valores mostrados en los elementos del formulario a esos valores, de forma que se mantengan sincronizados cuando recargues la página. Finalmente, actualizamos los estilos y la imagen decorativa en la página para que tus opciones personalizadas vuelvan a aparecer al recargar.</p>
+
+<h3 id="Guardar_valores_en_la_memoria">Guardar valores en la memoria</h3>
+
+<p>{{domxref("Storage.setItem()")}} se usa tanto para crear nuevos datos como para actualizar valores existentes (si el dato ya existía). Este método recibe dos argumentos: la llave del dato que se va a crear/modificar y el valor que se va a guardar.</p>
+
+<pre class="brush: js notranslate">function populateStorage() {
+  localStorage.setItem('bgcolor', document.getElementById('bgcolor').value);
+  localStorage.setItem('font', document.getElementById('font').value);
+  localStorage.setItem('image', document.getElementById('image').value);
+
+  setStyles();
+}</pre>
+
+<p>La función <code>populateStorage()</code> define tres elementos en el almacenamiento local — el color de fondo, la tipografía y la ruta de almacenamiento de la imagen. Luego corre la función <code>setStyles()</code> para actualizar el estilo de la página, etc.</p>
+
+<p>También incluimos un manejador <code>onchange</code> para cada elemento del formulario, de manera que los datos y los estilos son actualizados cada vez que un valor del formulario cambia:</p>
+
+<pre class="brush: js notranslate">bgcolorForm.onchange = populateStorage;
+fontForm.onchange = populateStorage;
+imageForm.onchange = populateStorage;</pre>
+
+<h3 id="Responder_a_cambios_en_la_memoria_con_el_evento_StorageEvent">Responder a cambios en la memoria con el evento StorageEvent</h3>
+
+<p>El evento {{domxref("StorageEvent")}} se dispara siempre que se hace un cambio al objeto {{domxref("Storage")}} (nota que este evento no se dispara para cambios en sessionStorage). Este evento no va a trabajar en la misma página en la que se están haciendo los cambios, sino que es una manera para que las otras páginas del dominio que usan la memoria sincronicen los cambios que se están haciendo. Las páginas en otros dominios no pueden acceder a los mismos objetos de almacenamiento.</p>
+
+<p>En la página de eventos (ver <a href="https://github.com/mdn/dom-examples/blob/master/web-storage/event.js">events.js</a>) el único JavaScript es el siguiente:</p>
+
+<pre class="brush: js notranslate">window.addEventListener('storage', function(e) {
+  document.querySelector('.my-key').textContent = e.key;
+  document.querySelector('.my-old').textContent = e.oldValue;
+  document.querySelector('.my-new').textContent = e.newValue;
+  document.querySelector('.my-url').textContent = e.url;
+  document.querySelector('.my-storage').textContent = JSON.stringify(e.storageArea);
+});</pre>
+
+<p>Aquí añadimos un detector de evento al objeto <code>window</code> que se dispara cuando el objeto {{domxref("Storage")}} asociado con el origen actual cambia. Como puedes ver arriba, el objeto asociado a este evento tiene varias propiedades que contienen información útil — la llave del dato que cambió, el valor anterior al cambio, el nuevo valor tras el cambio, la URL del documento que cambió la memoria y el objeto de almacenamiento mismo (que volvimos una cadena para que pudieras ver su contenido).</p>
+
+<h3 id="Borrar_registros">Borrar registros</h3>
+
+<p>El almacenamiento web también provee un par de métodos simples para remover datos. No los usamos en nuestro demo, pero se pueden añadir de manera muy simple a tu proyecto:</p>
+
+<ul>
+ <li>{{domxref("Storage.removeItem()")}} recibe un solo argumento — la llave del dato que quieres eliminar — y lo remueve del objeto de almacenamiento de ese dominio.</li>
+ <li>{{domxref("Storage.clear()")}} no recibe argumentos; vacía todo el objeto de almacenamiento de ese dominio.</li>
+</ul>
+
+<h2 id="Especificaciones">Especificaciones</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Especificación</th>
+   <th scope="col">Estado</th>
+   <th scope="col">Comentario</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('HTML WHATWG', 'webstorage.html#webstorage')}}</td>
+   <td>{{Spec2('HTML WHATWG')}}</td>
+   <td></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Compatibilidad_de_navegadores">Compatibilidad de 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>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>
+ </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>Basic support</td>
+   <td>2.1</td>
+   <td>{{ CompatUnknown }}</td>
+   <td>8</td>
+   <td>11</td>
+   <td>iOS 3.2</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<p>Todos los navegadores tienen distintos niveles de capacidad tanto para localStorage como para sessionStorage. Aquí está una <a class="external external-icon" href="http://dev-test.nemikor.com/web-storage/support-test/" rel="noopener" title="http://dev-test.nemikor.com/web-storage/support-test/">análisis detallado de todas las capacidades de almacenamiento de diferentes navegadores</a>.</p>
+
+<div class="note">
+<p><strong>Nota: </strong>Desde iOS 5.1, Safari Mobile almacena los datos de localStorage en la carpeta de caché, la cual está sujeta a limpiezas ocasionales, a petición del sistema operativo, típicamente cuando el espacio es reducido.</p>
+</div>
+
+<h2 id="Ver_también">Ver también</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/Web_Storage_API">Página de inicio de la API de almacenamiento web</a></li>
+</ul>