path: root/files/es/learn/javascript/client-side_web_apis/client-side_storage/index.html

---
title: Almacenamiento del lado cliente
slug: Learn/JavaScript/Client-side_web_APIs/Client-side_storage
tags:
  - API
  - Almacenaje
  - Article
  - CodingScripting
  - Guía
  - IndexedDB
  - JavaScript
  - Principiante
  - aprende
translation_of: Learn/JavaScript/Client-side_web_APIs/Client-side_storage
---
<p>{{LearnSidebar}}</p>

<div>{{PreviousMenu("Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</div>

<p class="summary">Los navegadores web modernos admiten varias formas para que los sitios web almacenen datos en la computadora del usuario, con el permiso del usuario, y luego los recuperen cuando sea necesario. Esto te permite conservar los datos para el almacenamiento a largo plazo, guardar sitios o documentos para su uso sin conexión, conservar la configuración específica del usuario para tu sitio y más. Este artículo explica los conceptos básicos de cómo funcionan.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Prerrequisitos:</th>
   <td>Conceptos básicos de JavaScript (consulta {{web.link("/es/docs/Learn/JavaScript/First_steps", "primeros pasos")}}, {{web.link("/es/docs/Learn/JavaScript/Building_blocks", "bloques de construcción")}}, {{web.link("/es/docs/Learn/JavaScript/Objects", "objetos JavaScript")}}), los {{web.link("/es/docs/Learn/JavaScript/Client-side_web_APIs/Introducción", "conceptos básicos de las APIs de lado del cliente")}}</td>
  </tr>
  <tr>
   <th scope="row">Objetivo:</th>
   <td>Aprender a utilizar las APIs de almacenamiento de lado del cliente para almacenar datos de aplicaciones.</td>
  </tr>
 </tbody>
</table>

<h2 id="¿Almacenamiento_de_lado_del_cliente">¿Almacenamiento de lado del cliente?</h2>

<p>En otra parte del área de aprendizaje de MDN, hablamos sobre la diferencia entre {{web.link("/es/docs/Learn/Server-side/First_steps/Client-Server_overview#Sitios_estaticos", "sitios estáticos")}} y {{web.link("/es/docs/Learn/Server-side/First_steps/Client-Server_overview#Sitios_dinamicos", "sitios dinámicos")}}. La mayoría de los principales sitios web modernos son dinámicos: almacenan datos en el servidor utilizando algún tipo de base de datos (almacenamiento de lado del servidor) y luego ejecutan {{web.link("/es/docs/Learn/Server-side", "de lado del servidor")}} para recuperar los datos necesarios, insertarlos en plantillas de páginas estáticas y entregar el HTML resultante al cliente para que lo muestre el navegador del usuario.</p>

<p>El almacenamiento de lado del cliente funciona con principios similares, pero tiene diferentes usos. Consiste en una API de JavaScript que te permiten almacenar datos en el cliente (es decir, en la máquina del usuario) y luego recuperarlos cuando sea necesario. Esto tiene muchos usos distintos, como:</p>

<ul>
 <li>Personalizar las preferencias del sitio (por ejemplo, mostrar la elección de un usuario de artilugios personalizados, combinación de colores o tamaño del tipo de letra).</li>
 <li>Persistencia de la actividad anterior del sitio (por ejemplo, almacenar el contenido de un carrito de compras de una sesión anterior, recordar si un usuario inició sesión anteriormente).</li>
 <li>Guardar datos y activos localmente para que un sitio sea más rápido (y potencialmente menos costoso) de descargar o se pueda usar sin una conexión de red.</li>
 <li>Guardar documentos generados por aplicaciones web localmente para usarlos sin conexión</li>
</ul>

<p>A menudo, el almacenamiento de lado del cliente y de lado del servidor se utilizan juntos. Por ejemplo, puedes descargar un lote de archivos de música (quizás utilizados por un juego web o una aplicación de reproducción de música), almacenarlos dentro de una base de datos de lado del cliente y reproducirlos según sea necesario. El usuario solo tendría que descargar los archivos de música una vez; en las visitas posteriores, se recuperarían de la base de datos.</p>

<div class="note">
<p><strong>Nota</strong>: Existen límites en la cantidad de datos que puedes almacenar utilizando las APIs de almacenamiento de lado del cliente (posiblemente tanto por API individual como acumulativamente); el límite exacto varía según el navegador y posiblemente según la configuración del usuario. Consulta {{web.link("/es/docs/Web/API/IndexedDB_API/Browser_storage_limits_and_eviction_criteria", "límites de almacenamiento del navegador y criterios de desalojo")}} para obtener más información.</p>
</div>

<h3 id="Vieja_escuela_cookies">Vieja escuela: <em>cookies</em></h3>

<p>El concepto de almacenamiento de lado del cliente existe desde hace mucho tiempo. Desde los primeros días de la web, los sitios han utilizado <em>{{web.link("/es/docs/Web/HTTP/Cookies", "cookies")}}</em> para almacenar información y personalizar la experiencia del usuario en los sitios web. Son la forma más antigua de almacenamiento de lado del cliente que se usa comúnmente en la web.</p>

<p>En estos días, existen mecanismos más fáciles disponibles para almacenar datos de lado del cliente, por lo tanto, no te enseñaremos cómo usar las <em>cookies</em> en este artículo. Sin embargo, esto no significa que las <em>cookies</em> sean completamente inútiles en la web moderna; todavía se usan comúnmente para almacenar datos relacionados con la personalización y el estado del usuario, p. ej. ID de sesión y fragmentos de acceso. Para obtener más información sobre las <em>cookies</em>, consulta nuestro artículo {{web.link("/es/docs/Web/HTTP/Cookies", "Uso de cookies HTTP")}}.</p>

<h3 id="Nueva_escuela_almacenamiento_web_e_IndexedDB">Nueva escuela: almacenamiento web e <code>IndexedDB</code></h3>

<p>Las características "más fáciles" que mencionamos anteriormente son las siguientes:</p>

<ul>
 <li>La {{web.link("/es/docs/Web/API/Web_Storage_API", "API de almacenamiento web")}} proporciona una sintaxis muy simple para almacenar y recuperar elementos de datos más pequeños que constan de un nombre y un valor correspondiente. Esto es útil cuando solo necesitas almacenar algunos datos simples, como el nombre del usuario, si está conectado, qué color usar para el fondo de la pantalla, etc.</li>
 <li>La {{web.link("/es/docs/Web/API/IndexedDB_API", "API IndexedDB")}} proporciona al navegador un sistema de base de datos completo para almacenar datos complejos. Esto se puede usar para cosas desde conjuntos completos de registros de clientes, hasta incluso tipos de datos complejos como archivos de audio o video.</li>
</ul>

<p>Aprenderás más sobre estas APIs a continuación.</p>

<h3 id="El_futuro_API_de_caché">El futuro: API de caché</h3>

<p>Algunos navegadores modernos admiten la nueva API {{domxref("Cache")}}. Esta API está diseñada para almacenar respuestas HTTP a solicitudes específicas y es muy útil para hacer cosas como almacenar activos del sitio web sin conexión para que el sitio se pueda usar posteriormente sin una conexión de red. La caché generalmente se usa en combinación con la {{web.link("/es/docs/Web/API/Service_Worker_API", "API del servicio Worker")}}, aunque no necesariamente tiene que ser así.</p>

<p>El uso de caché y el servicio <em>Workers</em> es un tema avanzado, y no lo cubriremos con gran detalle en este artículo, aunque mostraremos un ejemplo simple en la sección {{anch("Almacenamiento_de_activos_sin_conexion", "Almacenamiento de activos sin conexión")}} a continuación.</p>

<h2 id="Almacenamiento_de_datos_simples_almacenamiento_web">Almacenamiento de datos simples: almacenamiento web</h2>

<p>La {{web.link("/es/docs/Web/API/Web_Storage_API", "API de almacenamiento web")}} es muy fácil de usar: almacena pares de datos simples de nombre/valor (limitado a cadenas, números, etc.) y recupera estos valores cuando sea necesario.</p>

<h3 id="Sintaxis_básica">Sintaxis básica</h3>

<p>Te mostramos como:</p>

<ol>
 <li>
  <p>Primero, ve a nuestra <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/web-storage/index.html">plantilla en blanco de almacenamiento web</a> en GitHub (abre esto en una nueva pestaña).</p>
 </li>
 <li>
  <p>Abre la consola JavaScript de las herramientas de desarrollo de tu navegador.</p>
 </li>
 <li>
  <p>Todos tus datos de almacenamiento web están contenidos en dos estructuras similares a objetos dentro del navegador: {{domxref("Window.sessionStorage", "sessionStorage")}} y {{domxref("Window.localStorage", "localStorage")}}. El primero conserva los datos mientras el navegador está abierto (los datos se pierden cuando se cierra el navegador) y el segundo conserva los datos incluso después de que el navegador se cierra y luego se vuelve a abrir. Usaremos el segundo en este artículo, ya que generalmente es más útil.</p>

  <p>El método {{domxref("Storage.setItem()")}} te permite guardar un elemento de datos en el almacenamiento; toma dos parámetros: el nombre del elemento y su valor. Intenta escribir esto en tu consola de JavaScript (cambia el valor a tu propio nombre, si lo deseas):</p>

  <pre class="brush: js notranslate">localStorage.setItem('nombre','Chris');</pre>
 </li>
 <li>
  <p>El método {{domxref("Storage.getItem()")}} toma un parámetro, el nombre de un elemento de datos que deseas recuperar, y devuelve el valor del elemento. Ahora escribe estas líneas en tu consola JavaScript:</p>

  <pre class="brush: js notranslate">let miNombre = localStorage.getItem('nombre');
miNombre</pre>

  <p>Al escribir en la segunda línea, deberías ver que la variable <code>miNombre</code> ahora contiene el valor del elemento de datos <code>nombre</code>.</p>
 </li>
 <li>
  <p>El método {{domxref("Storage.removeItem()")}} toma un parámetro, el nombre de un elemento de datos que desea eliminar, y elimina ese elemento del almacenamiento web. Escribe las siguientes líneas en tu consola JavaScript:</p>

  <pre class="brush: js notranslate">localStorage.removeItem('nombre');
let miNombre = localStorage.getItem('nombre');
miNombre</pre>

  <p>La tercera línea ahora debería devolver <code>null</code>: el elemento <code>nombre</code> ya no existe en el almacenamiento web.</p>
 </li>
</ol>

<h3 id="¡Los_datos_persisten!">¡Los datos persisten!</h3>

<p>Una característica clave del almacenamiento web es que los datos persisten entre las cargas de la página (e incluso cuando el navegador está apagado, en el caso de <code>localStorage</code>). Veamos esto en acción.</p>

<ol>
 <li>
  <p>Abre nuestra plantilla en blanco de almacenamiento web nuevamente, ¡pero esta vez en un navegador diferente al que tiene abierto este tutorial!; Esto hará que sea más fácil de manejar.</p>
 </li>
 <li>
  <p>Escribe estas líneas en la consola JavaScript del navegador:</p>

  <pre class="brush: js notranslate">localStorage.setItem('nombre','Chris');
let miNombre = localStorage.getItem('nombre');
miNombre</pre>

  <p>Deberías ver el nombre del elemento devuelto.</p>
 </li>
 <li>
  <p>Ahora cierre el navegador y ábrelo de nuevo.</p>
 </li>
 <li>
  <p>Ingresa las siguientes líneas nuevamente:</p>

  <pre class="brush: js notranslate">let miNombre = localStorage.getItem('nombre');
miNombre</pre>

  <p>Deberías ver que el valor aún está disponible, aunque el navegador se haya cerrado y luego se haya abierto nuevamente.</p>
 </li>
</ol>

<h3 id="Almacenamiento_independiente_para_cada_dominio">Almacenamiento independiente para cada dominio</h3>

<p>Hay un almacén de datos separado para cada dominio (cada dirección web separada cargada en el navegador). Verás que si cargas dos sitios web (por ejemplo, google.com y amazon.com) e intentas almacenar un elemento en un sitio web, no estará disponible para el otro sitio web.</p>

<p>Esto tiene sentido: ¿puedes imaginar los problemas de seguridad que surgirían si los sitios web pudieran ver los datos de los demás?</p>

<h3 id="Un_ejemplo_más_complicado">Un ejemplo más complicado</h3>

<p>Apliquemos este conocimiento recién descubierto escribiendo un sencillo ejemplo para darte una idea de cómo se puede usar el almacenamiento web. Nuestro ejemplo te permitirá ingresar un nombre, luego de lo cual la página se actualizará para darte un saludo personalizado. Este estado también persistirá en las recargas de la página/navegador, porque el nombre se guarda en el almacenamiento web.</p>

<p>Puede encontrar el HTML de ejemplo en <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/web-storage/personal-greeting.html">personal-greeting.html</a>: contiene un sitio web simple con un encabezado, contenido y pie de página, y un formulario para ingresar tu nombre.</p>

<p><img alt="Ejemplo de almacenamiento" src="https://mdn.mozillademos.org/files/15735/web-storage-demo.png" style="display: block; margin: 0 auto;"></p>

<p>Construyamos el ejemplo para que puedas entender cómo funciona.</p>

<ol>
 <li>
  <p>Primero, haz una copia local de nuestro archivo <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/web-storage/personal-greeting.html">personal-greeting.html</a> en un nuevo directorio en tu computadora.</p>
 </li>
 <li>
  <p>A continuación, observa cómo nuestro HTML hace referencia a un archivo JavaScript llamado <code>index.js</code> (ve la línea 40). Necesitamos crearlo y escribir nuestro código JavaScript en él. Cree un archivo <code>index.js</code> en el mismo directorio que tu archivo HTML.</p>
 </li>
 <li>
  <p>Comenzaremos creando referencias a todas las características HTML que necesitamos manipular en este ejemplo; las crearemos todas como constantes, ya que estas referencias no necesitan cambiar en el ciclo de vida de la aplicación. Agrega las siguientes líneas a tu archivo JavaScript:</p>

  <pre class="brush: js notranslate">// crea las constantes necesarias
const rememberDiv = document.querySelector('.remember');
const forgetDiv = document.querySelector('.forget');
const form = document.querySelector('form');
const nameInput = document.querySelector('#entername');
const submitBtn = document.querySelector('#submitname');
const forgetBtn = document.querySelector('#forgetname');

const h1 = document.querySelector('h1');
const personalGreeting = document.querySelector('.personal-greeting');</pre>
 </li>
 <li>
  <p>A continuación, necesitamos incluir un pequeño escucha de eventos para evitar que el formulario se envíe cuando se presiona el botón de envío, ya que este no es el comportamiento que queremos. Agrega este fragmento debajo de tu código anterior:</p>

  <pre class="brush: js notranslate">// Evita que el formulario se envíe cuando se presiona un botón
form.addEventListener('submit', function(e) {
  e.preventDefault();
});</pre>
 </li>
 <li>
  <p>Ahora necesitamos agregar un escucha de eventos, cuya función controladora se ejecutará cuando se haga clic en el botón "Saludar". Los comentarios explican en detalle qué hace cada bit, pero en esencia aquí tomamos el nombre que el usuario ingresó en el cuadro de entrada de texto y lo guardamos en el almacenamiento web usando <code>setItem()</code>, luego ejecutamos una función llamada <code>nameDisplayCheck()</code> que se encargará de actualizar el texto real del sitio web. Agrega esto al final de tu código:</p>

  <pre class="brush: js notranslate">// ejecuta la función cuando se hace clic en el botón 'Saludar'
submitBtn.addEventListener('click', function() {
  // guarda el nombre ingresado en el almacenamiento web
  localStorage.setItem('name', nameInput.value);
  // ejecuta nameDisplayCheck() para ordenar la visualización del
  // saludo personalizado y actualización de la visualización del formulario
  nameDisplayCheck();
});</pre>
 </li>
 <li>
  <p>En este punto, también necesitamos un controlador de eventos para ejecutar una función cuando se hace clic en el botón "Olvidar"; esto solo se muestra después de hacer clic en el botón "Saludar" (los dos estados del formulario se alternan hacia adelante y hacia atrás). En esta función, eliminamos el elemento <code>name</code> del almacenamiento web usando <code>removeItem()</code>, luego ejecutamos nuevamente <code>nameDisplayCheck()</code> para actualizar la pantalla. Agrega esto al final:</p>

  <pre class="brush: js notranslate">// ejecuta la función cuando se hace clic en el botón 'Olvidar'
forgetBtn.addEventListener('click', function() {
  // Elimina el nombre guardado del almacenamiento web
  localStorage.removeItem('nombre');
  // ejecuta nameDisplayCheck() para ordenar la visualización del
  // saludo genérico nuevamente y actualiza la visualización del formulario
  nameDisplayCheck();
});</pre>
 </li>
 <li>
  <p>Ahora es el momento de definir la propia función <code>nameDisplayCheck()</code>. Aquí verificamos si el elemento de nombre se ha guardado en el almacenamiento web utilizando <code>localStorage.getItem('name')</code> como prueba condicional. Si se ha guardado, esta llamada se evaluará como <code>true</code>; si no, será <code>false</code>. Si es <code>true</code>, mostramos un saludo personalizado, mostramos la parte "Olvidar" del formulario y ocultamos la parte "Saludar" del formulario. Si es <code>false</code>, mostramos un saludo genérico y hacemos lo contrario. Nuevamente, pon el siguiente código en la parte inferior:</p>

  <pre class="brush: js notranslate">// definir la función nameDisplayCheck()
function nameDisplayCheck() {
  // verifica si el elemento de datos 'name' está guardado en el almacenamiento web
  if(localStorage.getItem('name')) {
    // Si es así, muestra un saludo personalizado
    let name = localStorage.getItem('name');
    h1.textContent = 'Bienvenido, ' + name;
    personalGreeting.textContent = '¡Bienvenido a nuestro sitio web, ' + name + '! Esperamos que te diviertas mientras estés aquí.';
    // ocultar la parte 'recordar' del formulario y mostrar la parte 'olvidar'
    forgetDiv.style.display = 'block';
    rememberDiv.style.display = 'none';
  } else {
    // si no, muestra un saludo genérico
    h1.textContent = 'Bienvenido a nuestro sitio web ';
    personalGreeting.textContent = 'Bienvenido a nuestro sitio web. Esperamos que se diviertas mientras estés aquí.';
    // ocultar la parte 'olvidar' del formulario y mostrar la parte 'recordar'
    forgetDiv.style.display = 'none';
    rememberDiv.style.display = 'block';
  }
}</pre>
 </li>
 <li>
  <p>Por último, pero no menos importante, debemos ejecutar la función <code>nameDisplayCheck()</code> cada vez que se carga la página. Si no hacemos esto, el saludo personalizado no persistirá en las recargas de la página. Agrega lo siguiente al final de tu código:</p>

  <pre class="brush: js notranslate">document.body.onload = nameDisplayCheck;</pre>
 </li>
</ol>

<p>Tu ejemplo está terminado, ¡bien hecho!; Todo lo que queda ahora es guardar tu código y probar tu página HTML en un navegador. Puedes ver nuestra <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/web-storage/personal-greeting.html">versión finalizada en vivo aquí</a>.</p>

<div class="note">
<p><strong>Nota</strong>: Hay otro ejemplo un poco más complejo para explorar en {{web.link("/es/docs/Web/API/Web_Storage_API/Using_the_Web_Storage_API", "Uso de la API de almacenamiento web")}}.</p>
</div>

<div class="note">
<p><strong>Nota</strong>: En la línea <code>&lt;script src="index.js" defer&gt;&lt;/script&gt;</code> del código fuente de nuestra versión final, el atributo <code>defer</code> especifica que el contenido del elemento {{htmlelement("script")}} no se ejecutará hasta que la página haya terminado de cargarse.</p>
</div>

<h2 id="Almacenamiento_de_datos_complejos_—_IndexedDB">Almacenamiento de datos complejos — <code>IndexedDB</code></h2>

<p>La {{web.link("/es/docs/Web/API/IndexedDB_API", "API IndexedDB")}} (a veces abreviada <em>IDB</em>) es un sistema de base de datos completo disponible en el navegador en el que puedes almacenar datos complejos relacionados, tipos de los cuales no se limitan a valores simples como cadenas o números. Puedes almacenar videos, imágenes y casi cualquier otra cosa en una instancia de <code>IndexedDB</code>.</p>

<p>Sin embargo, esto tiene un costo: <code>IndexedDB</code> es mucho más complejo de usar que la API de almacenamiento web. En esta sección, solo vamos a arañar la superficie de lo que es capaz de hacer, pero te daremos lo suficiente para comenzar.</p>

<h3 id="Trabajar_con_un_ejemplo_de_almacenamiento_de_notas">Trabajar con un ejemplo de almacenamiento de notas</h3>

<p>Aquí, mostraremos un ejemplo que te permite almacenar notas en tu navegador y verlas y eliminarlas cuando lo desees, lo cual te permitirá crearlo tú mismo y explicar las partes más fundamentales del <em>IDB</em> a medida que avanzamos.</p>

<p>La aplicación se parece a esta:</p>

<p><img alt="IDB en acción" src="https://mdn.mozillademos.org/files/15744/idb-demo.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p>

<p>Cada nota tiene un título y un cuerpo de texto, cada uno editable individualmente. El código JavaScript que veremos a continuación tiene comentarios detallados para ayudarte a comprender lo que está sucediendo.</p>

<h3 id="Primeros_pasos">Primeros pasos</h3>

<ol>
 <li>En primer lugar, haz copias locales de nuestros archivos <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/index.html"><code>index.html</code></a>, <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/style.css"><code>style.css</code></a> y <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/index-start.js"><code>index-start.js</code></a> en un nuevo directorio en tu máquina.</li>
 <li>Échale un vistazo a los archivos. Verás que el HTML es bastante simple: un sitio web con encabezado y pie de página, así como un área de contenido principal que contiene un lugar para mostrar notas y un formulario para ingresar nuevas notas en la base de datos. El CSS proporciona un estilo simple para aclarar lo que está sucediendo. El archivo JavaScript contiene cinco constantes declaradas que contienen referencias al elemento {{htmlelement("ul")}} en el que se mostrarán las notas, el título y el cuerpo de elementos {{htmlelement("input")}}, el {{htmlelement("form")}} en sí mismo, y el {{htmlelement("button")}}.</li>
 <li>Cambia el nombre de tu archivo JavaScript a <code>index.js</code>. Ahora estás listo para comenzar a agregarle código.</li>
</ol>

<h3 id="Configuración_inicial_de_la_base_de_datos">Configuración inicial de la base de datos</h3>

<p>Ahora veamos lo que tenemos que hacer en primer lugar, para configurar una base de datos.</p>

<ol>
 <li>
  <p>Debajo de las declaraciones constantes, agrega las siguientes líneas:</p>

  <pre class="brush: js notranslate">// Crea una instancia de un objeto db para que almacenemos la base de datos abierta
let db;</pre>

  <p>Aquí estamos declarando una variable llamada <code>db</code>, que luego se usará para almacenar un objeto que representa nuestra base de datos. Usaremos esto en algunos lugares, por lo que hemos declarado globalmente aquí para facilitar las cosas.</p>
 </li>
 <li>
  <p>A continuación, agrega lo siguiente al final de tu código:</p>

  <pre class="brush: js notranslate">window.onload = function() {

};</pre>

  <p>Escribiremos todo nuestro subsiguiente código dentro de esta función controladora de eventos <code>window.onload</code>, llamada cuando se activa el evento {{event("load")}} de la ventana, para asegurarnos de que no intentemos usar la funcionalidad <code>IndexedDB</code> antes de que la aplicación haya terminado de cargarse por completo (podría fallar si no lo hacemos).</p>
 </li>
 <li>
  <p>Dentro del controlador <code>window.onload</code>, agrega lo siguiente:</p>

  <pre class="brush: js notranslate">// Abre nuestra base de datos; se crea si aún no existe
// (ve onupgradeneeded a continuación)
let request = window.indexedDB.open('notes_db', 1);</pre>

  <p>Esta línea crea una <code>solicitud</code> para abrir la versión <code>1</code> de una base de datos llamada <code>notes_db</code>. Si esta aún no existe, se creará para ti mediante un código posterior. Verás que este patrón de solicitud se usa con mucha frecuencia en <code>IndexedDB</code>. Las operaciones de la base de datos llevan tiempo. No deseas colgar el navegador mientras esperas los resultados, por lo que las operaciones de la base de datos son {{Glossary("asíncronas")}}, lo que significa que en lugar de ocurrir de inmediato, sucederán en algún momento en el futuro, y recibirás una notificación cuando haya terminado.</p>

  <p>Para manejar esto en IndexedDB, crea un objeto de solicitud (que se puede llamar como desees; lo llamamos <code>request</code>, por lo que es obvio para qué sirve). Luego, usa controladores de eventos para ejecutar código cuando la solicitud se completa, falla, etc., que verás en uso a continuación.</p>

  <div class="note">
  <p><strong>Nota</strong>: El número de versión es importante. Si deseas actualizar tu base de datos (por ejemplo, cambiando la estructura de la tabla), debes ejecutar tu código nuevamente con un número de versión aumentado, un esquema diferente especificado dentro del controlador <code>onupgradeneeded</code> (ve más abajo), etc. No cubriremos la actualización de bases de datos en este sencillo tutorial.</p>
  </div>
 </li>
 <li>
  <p>Ahora agrega los siguientes controladores de eventos justo debajo de tu adición anterior, nuevamente dentro del controlador <code>window.onload</code>:</p>

  <pre class="brush: js notranslate">// un controlador de error significa que la base de datos no se abrió correctamente
request.onerror = function() {
  console.log('No se pudo abrir la base de datos');
};

// controlador onsuccess significa que la base de datos se abrió correctamente
request.onsuccess = function() {
  console.log('Base de datos abierta con éxito');

  // Almacena el objeto de base de datos abierto en la variable db. Esto se usa mucho a continuación
  db = request.result;

  // Ejecute la función displayData() para mostrar las notas que ya están en la IDB
  displayData();
};</pre>

  <p>El controlador {{domxref("IDBRequest.onerror", "request.onerror")}} se ejecutará si el sistema dice que la solicitud falló. Esto te permite responder a este problema. En nuestro sencillo ejemplo, simplemente imprimimos un mensaje en la consola de JavaScript.</p>

  <p>El controlador {{domxref("IDBRequest.onsuccess", "request.onsuccess")}} por otro lado se ejecutará si la solicitud regresa con éxito, lo que significa que la base de datos se abrió correctamente. Si este es el caso, un objeto que representa la base de datos abierta pasa a estar disponible en la propiedad {{domxref("IDBRequest.result", "request.result")}}, lo que nos permite manipular la base de datos. Almacenamos esto en la variable <code>db</code> que creamos anteriormente para su uso posterior. También ejecutamos una función personalizada llamada <code>displayData()</code>, que muestra los datos en la base de datos dentro de {{HTMLElement("ul")}}. Lo ejecutamos ahora para que las notas que ya están en la base de datos se muestren tan pronto como se cargue la página. Verás esto definido más adelante.</p>
 </li>
 <li>
  <p>Finalmente, en esta sección, agregaremos probablemente el controlador de eventos más importante para configurar la base de datos: {{domxref("IDBOpenDBRequest.onupgradeneeded", "request.onupgradeneeded")}}. Este controlador se ejecuta si la base de datos aún no se ha configurado, o si la base de datos se abre con un número de versión mayor que la base de datos almacenada existente (al realizar una actualización). Agrega el siguiente código, debajo de tu controlador anterior:</p>

  <pre class="brush: js notranslate">// Configura las tablas de la base de datos si esto aún no se ha hecho
request.onupgradeneeded = function(e) {
  // Toma una referencia a la base de datos abierta
  let db = e.target.result;

  // Crea un objectStore para almacenar nuestras notas (básicamente como una sola tabla)
  // incluyendo una clave de incremento automático
  let objectStore = db.createObjectStore('notes_os', {keyPath: 'id', autoIncrement: true});

  // Define qué elementos de datos contendrá el objectStore
  objectStore.createIndex('title', 'title', { unique: false });
  objectStore.createIndex('body', 'body', { unique: false });

  console.log('Configuración de la base de datos completa');
};</pre>

  <p>Aquí es donde definimos el esquema (estructura) de nuestra base de datos; es decir, el conjunto de columnas (o campos) que contiene. Aquí primero tomamos una referencia a la base de datos existente de la propiedad <code>result</code> del objetivo del evento (<code>e.target.result</code>), que es el objeto <code>request</code>. Esto es equivalente a la línea <code>db = request.result;</code> dentro del controlador <code>onsuccess</code>, pero aquí, debemos hacer esto por separado porque el controlador <code>onupgradeneeded</code> (si es necesario) se ejecutará antes que el controlador <code>onsuccess</code>, lo que significa que el valor <code>db</code> no estaría disponible si no hiciéramos esto.</p>

  <p>Luego usamos {{domxref("IDBDatabase.createObjectStore()")}} para crear un nuevo almacén de objetos dentro de nuestra base de datos abierta llamada <code>notes_os</code>. Esto es equivalente a una sola tabla en un sistema de base de datos convencional. Le hemos dado el nombre <em>notas</em>, y también hemos especificado un campo clave <code>autoIncrement</code> llamado <code>id</code> — en cada nuevo registro se le dará automáticamente un valor incrementado — el desarrollador no lo hace No es necesario establecer esto explícitamente. Al ser la clave, el campo <code>id</code> se utilizará para identificar registros de forma única, como cuando se elimina o muestra un registro.</p>

  <p>También creamos otros dos índices (campos) usando el método {{domxref("IDBObjectStore.createIndex()")}}: <code>title</code> (que contendrá un título para cada nota) y <code>body</code> (que contendrá el texto del cuerpo de la nota).</p>
 </li>
</ol>

<p>Entonces, con este esquema de base de datos simple configurado, cuando comenzamos a agregar registros a la base de datos; cada uno se representará como un objeto siguiendo estas líneas:</p>

<pre class="brush: js notranslate">{
  title: "Compra leche",
  body: "Necesita leche de vaca y soja",
  id: 8
}</pre>

<h3 id="Agregar_datos_a_la_base_de_datos">Agregar datos a la base de datos</h3>

<p>Ahora veamos cómo podemos agregar registros a la base de datos. Esto se hará mediante el formulario de nuestra página.</p>

<p>Debajo de tu controlador de eventos anterior (pero aún dentro del controlador <code>window.onload</code>), agrega la siguiente línea, que configura un controlador <code>onsubmit</code> que ejecuta una función llamada <code>addData()</code> cuando se envía el formulario (cuando se presiona el {{htmlelement("button")}} de enviar, lo que lleva a un envío exitoso del formulario):</p>

<pre class="brush: js notranslate">// Crea un controlador onsubmit para que cuando se envíe el formulario se ejecute la función addData()
form.onsubmit = addData;</pre>

<p>Ahora definamos la función <code>addData()</code>. Agrega esto debajo de tu línea anterior:</p>

<pre class="brush: js notranslate">// Define la función addData()
function addData(e) {
  // evitar el predeterminado: no queremos que el formulario se envíe de la forma convencional
  e.preventDefault();

  // toma los valores ingresados en los campos del formulario y los almacenar en un objeto listo para ser insertado en la base de datos
  let newItem = { title: titleInput.value, body: bodyInput.value };

  // abre una transacción de base de datos de lectura/escritura, lista para agregar los datos
  let transaction = db.transaction(['notes_os'], 'readwrite');

  // llama a un almacén de objetos que ya se ha agregado a la base de datos
  let objectStore = transaction.objectStore('notes_os');

  // Hacer una solicitud para agregar nuestro objeto newItem al almacén de objetos
  let request = objectStore.add(newItem);
  request.onsuccess = function() {
    // Limpiar el formulario, listo para agregar la siguiente entrada
    titleInput.value = '';
    bodyInput.value = '';
  };

  // Informa sobre el éxito de la transacción completada, cuando todo esté hecho
  transaction.oncomplete = function() {
    console.log('Transacción completada: modificación de la base de datos finalizada.');

    // actualiza la visualización de datos para mostrar el elemento recién agregado, ejecutando displayData() nuevamente.
    displayData();
  };

  transaction.onerror = function() {
    console.log('Transacción no abierta debido a error');
  };
}</pre>

<p>Esto es bastante complejo; desglosándolo, podemos:</p>

<ul>
 <li>Ejecuta {{domxref("Event.preventDefault()")}} en el objeto de evento para detener el envío del formulario de la manera convencional (esto provocaría una actualización de la página y estropearía la experiencia).</li>
 <li>Crea un objeto que represente un registro para ingresar a la base de datos, llenándolo con valores de las entradas del formulario. ten en cuenta que no tenemos que incluir explícitamente un valor de <code>id</code>; como explicamos anteriormente, esto se completa automáticamente.</li>
 <li>Abre una transacción <code>readwrite</code> contra el almacén de objetos <code>notes_os</code> utilizando el método {{domxref("IDBDatabase.transaction()")}}. Este objeto de transacción nos permite acceder al almacén de objetos para que podamos hacerle algo, p. ej. agregar un nuevo registro.</li>
 <li>Accede a la tienda de objetos utilizando el método {{domxref("IDBTransaction.objectStore()")}}, guardando el resultado en la variable <code>objectStore</code>.</li>
 <li>Agrega el nuevo registro a la base de datos usando {{domxref("IDBObjectStore.add()")}}. Esto crea un objeto <code>request</code>, de la misma manera que hemos visto antes.</li>
 <li>Agrega un grupo de controladores de eventos a <code> request</code> y a <code>transaction</code> para ejecutar código en puntos críticos del ciclo de vida. Una vez que la solicitud ha tenido éxito, borramos las entradas del formulario y estamos listos para ingresar la siguiente nota. Una vez que la transacción se ha completado, ejecutamos la función <code>displayData()</code> nuevamente para actualizar la visualización de notas en la página.</li>
</ul>

<h3 id="Visualización_de_los_datos">Visualización de los datos</h3>

<p>Ya hemos hecho referencia a <code>displayData()</code> dos veces en nuestro código, por lo que probablemente sea mejor definirla. Agrega esto a tu código, debajo de la definición de función anterior:</p>

<pre class="brush: js notranslate">// Define la función displayData()
function displayData() {
  // Aquí vaciamos el contenido del elemento de la lista cada vez que se actualiza la pantalla
  // Si no hiciste esto, obtendrás duplicados en la lista cada vez que se agregue una nueva nota
  while (list.firstChild) {
    list.removeChild(list.firstChild);
  }

  // Abre el almacén de objetos y luego obtiene un cursor, que recorre todos los
  // diferentes elementos de datos en el almacén
  let objectStore = db.transaction('notes_os').objectStore('notes_os');
  objectStore.openCursor().onsuccess = function(e) {
    // Obtiene una referencia al cursor
    let cursor = e.target.result;

    // Si todavía hay otro elemento de datos para iterar, sigue ejecutando este código
    if(cursor) {
      // Crea un elemento de lista, h3 y p para poner cada elemento de datos dentro al mostrarlo
      // estructura el fragmento HTML y lo anexa dentro de la lista
      const listItem = document.createElement('li');
      const h3 = document.createElement('h3');
      const para = document.createElement('p');

      listItem.appendChild(h3);
      listItem.appendChild(para);
      list.appendChild(listItem);

      // Coloca los datos del cursor dentro de h3 y para
      h3.textContent = cursor.value.title;
      para.textContent = cursor.value.body;

      // Almacena el ID del elemento de datos dentro de un atributo en listItem, para que sepamos
      // a qué elemento corresponde. Esto será útil más adelante cuando queramos eliminar elementos.
      listItem.setAttribute('data-note-id', cursor.value.id);

      // Crea un botón y lo coloca dentro de cada listItem
      const deleteBtn = document.createElement('button');
      listItem.appendChild(deleteBtn);
      deleteBtn.textContent = 'Delete';

      // Establece un controlador de eventos para que cuando se hace clic en el botón, el elemento deleteItem()
      // se ejecuta la función
      deleteBtn.onclick = deleteItem;

      // Iterar al siguiente elemento del cursor
      cursor.continue();
    } else {
      // Nuevamente, si el elemento de la lista está vacío, muestra el mensaje 'No hay notas almacenadas'
      if(!list.firstChild) {
        const listItem = document.createElement('li');
        listItem.textContent = 'No hay notas almacenadas.';
        list.appendChild(listItem);
      }
      // si no hay más elementos de cursor para iterar, dilo
      console.log('Se muestran todas las notas');
    }
  };
}</pre>

<p>De nuevo, analicemos esto:</p>

<ul>
 <li>Primero vaciamos el contenido del elemento {{htmlelement("ul")}}, antes de llenarlo con el contenido actualizado. Si no hiciera esto, terminarías con una enorme lista de contenido duplicado que se agrega con cada actualización.</li>
 <li>A continuación, obtenemos una referencia al almacén de objetos <code>notes_os</code> usando {{domxref("IDBDatabase.transaction()")}} y {{domxref("IDBTransaction.objectStore()")}} como hicimos en <code>addData()</code>, excepto que aquí los estamos encadenando juntos en una línea.</li>
 <li>El siguiente paso es usar el método {{domxref("IDBObjectStore.openCursor()")}} para abrir una solicitud de un cursor; esta es una construcción que se puede usar para iterar sobre los registros en un almacén de objetos. Encadenamos un controlador <code>onsuccess</code> al final de esta línea para que el código sea más conciso: cuando el cursor se devuelve correctamente, se ejecuta el controlador.</li>
 <li>Obtenemos una referencia al propio cursor (un objeto {{domxref("IDBCursor")}}) usando let <code>cursor = e.target.result</code>.</li>
 <li>A continuación, verificamos si el cursor contiene un registro del almacén de datos (<code>if (cursor) {...}</code>); si es así, creamos un fragmento DOM, lo llenamos con los datos del registro y lo insertamos en la página (dentro del elemento <code>&lt;ul&gt;</code>). También incluimos un botón para eliminar que, al hacer clic, eliminará esa nota ejecutando la función <code>deleteItem()</code>, que veremos en la siguiente sección.</li>
 <li>Al final del bloque <code>if</code>, usamos el método {{domxref("IDBCursor.continue()")}} para hacer avanzar el cursor al siguiente registro en el almacén de datos y ejecutar el contenido de el bloque <code>if</code> nuevamente. Si hay otro registro para iterar, esto hace que se inserte en la página, y luego se ejecuta <code>continue()</code> nuevamente, y así sucesivamente.</li>
 <li>Cuando no hay más registros sobre los que iterar, <code>cursor</code> devolverá <code>undefined</code> y, por lo tanto, el bloque <code>else</code> se ejecutará en lugar del bloque <code>if</code>. Este bloque comprueba si se insertaron notas en el <code>&lt;ul&gt;</code>; de lo contrario, inserta un mensaje para indicar que no se almacenó ninguna nota.</li>
</ul>

<h3 id="Eliminar_una_nota">Eliminar una nota</h3>

<p>Como se indicó anteriormente, cuando se presiona el botón de eliminación de una nota, la nota se elimina. Esto se logra mediante la función <code>deleteItem()</code>, que se ve así:</p>

<pre class="brush: js notranslate">// Define la función deleteItem()
function deleteItem(e) {
  // recuperamos el nombre de la tarea que queremos eliminar. Necesitamos
  // convertirla en un número antes de intentarla úselo con IDB; Clave del IDB
  // los valores son sensibles al tipo.
  let noteId = Number(e.target.parentNode.getAttribute('data-note-id'));

  // abre una transacción de base de datos y elimina la tarea, encontrándola usando la identificación que obtuvimos arriba
  let transaction = db.transaction(['notes_os'], 'readwrite');
  let objectStore = transaction.objectStore('notes_os');
  let request = objectStore.delete(noteId);

  // informa que el elemento de datos ha sido eliminado
  transaction.oncomplete = function() {
    // elimina el padre del botón
    // que es el elemento de la lista, por lo que ya no se muestra
    e.target.parentNode.parentNode.removeChild(e.target.parentNode);
    console.log('Nota ' + noteId + ' eliminada.');

    // Nuevamente, si el elemento de la lista está vacío, muestra el mensaje 'No hay notas almacenadas'
    if(!list.firstChild) {
      let listItem = document.createElement('li');
      listItem.textContent = 'No hay notas almacenadas.';
      list.appendChild(listItem);
    }
  };
}</pre>

<ul>
 <li>La primera parte de esto podría necesitar algo de explicación: recuperamos el ID del registro que se va a eliminar usando <code>Number(e.target.parentNode.getAttribute('data-note-id'))</code> — recuerda que el ID del registro se guardó en un atributo <code>data-note-id</code> en el <code>&lt;li&gt;</code> cuando se mostró por primera vez. Sin embargo, necesitamos pasar el atributo a través del objeto <code><a href="/es/docs/Web/JavaScript/Reference/Global_Objects/Number">Number()</a></code> integrado global ya que es de tipo cadena de datos y, por lo tanto, no sería reconocido por la base de datos, que espera un número.</li>
 <li>Luego obtenemos una referencia al almacén de objetos usando el mismo patrón que hemos visto anteriormente, y usamos el método {{domxref("IDBObjectStore.delete()")}} para eliminar el registro de la base de datos, pasándole el ID.</li>
 <li>Cuando se completa la transacción de la base de datos, eliminamos el <code>&lt;li&gt;</code> de la nota del DOM, y nuevamente hacemos la verificación para ver si el <code>&lt;ul&gt;</code> ahora está vacío, insertando un nota según corresponda.</li>
</ul>

<p>¡Eso es todo!; Tu ejemplo debería funcionar ahora.</p>

<p>Si tienes problemas con él, no dudes en <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/indexeddb/notes/">compararlo con nuestro ejemplo en vivo</a> (consulta el <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/indexeddb/notes/index.js">código fuente</a> también).</p>

<h3 id="Almacenamiento_de_datos_complejos_a_través_de_IndexedDB">Almacenamiento de datos complejos a través de <code>IndexedDB</code></h3>

<p>Como mencionamos anteriormente, <code>IndexedDB</code> se puede usar para almacenar más que simples cadenas de texto. Puedes almacenar casi cualquier cosa que desees, incluidos objetos complejos como blobs de imágenes o vídeos. Y no es mucho más difícil de conseguir que cualquier otro tipo de dato.</p>

<p>Para demostrar cómo hacerlo, hemos escrito otro ejemplo llamado <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/client-side-storage/indexeddb/video-store">almacenaje de videos con IndexedDB</a> (verlo <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/indexeddb/video-store/">en vivo aquí también</a>). Cuando ejecutas el ejemplo por primera vez, descarga todos los videos de la red, los almacena en una base de datos <code>IndexedDB</code> y luego muestra los videos en la IU dentro de los elementos {{htmlelement("video")}}. La segunda vez que lo ejecutas, encuentra los videos en la base de datos y los obtiene de allí antes de mostrarlos; esto hace que las cargas posteriores sean mucho más rápidas y menos necesitadas de ancho de banda.</p>

<p>Repasemos las partes más interesantes del ejemplo. No lo veremos todo; gran parte es similar al ejemplo anterior y el código está bien comentado.</p>

<ol>
 <li>
  <p>Para este ejemplo simple, hemos almacenado los nombres de los videos para buscarlos en un arreglo de objetos:</p>

  <pre class="brush: js notranslate">const videos = [
  { 'name' : 'crystal' },
  { 'name' : 'elf' },
  { 'name' : 'frog' },
  { 'name' : 'monster' },
  { 'name' : 'pig' },
  { 'name' : 'rabbit' }
];</pre>
 </li>
 <li>
  <p>Para empezar, una vez que la base de datos se abre con éxito, ejecutamos una función <code>init()</code>. Esto recorre los diferentes nombres de video, tratando de cargar un registro identificado por cada nombre de la base de datos de <code>videos</code>.</p>

  <p>Si cada video se encuentra en la base de datos (se verifica fácilmente al ver si <code>request.result</code> se evalúa como <code>true</code>; si el registro no está presente, será <code>undefined</code>), sus archivos de video (almacenados como blobs) y el nombre del video se pasan directamente a la función <code>displayVideo()</code> para colocarlos en la interfaz de usuario. De lo contrario, el nombre del video se pasa a la función <code>fetchVideoFromNetwork()</code> para ... ¡adivinaste!: recupera el video de la red.</p>

  <pre class="brush: js notranslate">function init() {
  // Recorre los nombres de los videos uno por uno
  for(let i = 0; i &lt; videos.length; i++) {
    // Abre la transacción, obtiene objetos del almacén y get() cada video por nombre
    let objectStore = db.transaction('videos_os').objectStore('videos_os');
    let request = objectStore.get(videos[i].name);
    request.onsuccess = function() {
      // Si el resultado existe en la base de datos (no está indefinido)
      if(request.result) {
        // Toma los videos del IDB y los muestra usando displayVideo()
        console.log('tomando videos del IDB');
        displayVideo(request.result.mp4, request.result.webm, request.result.name);
      } else {
        // Recuperar los videos de la red
        fetchVideoFromNetwork(videos[i]);
      }
    };
  }
}</pre>
 </li>
 <li>
  <p>El siguiente fragmento se tomó del interior de <code>fetchVideoFromNetwork()</code> — aquí obtenemos las versiones MP4 y WebM del video usando dos peticiones {{domxref("fetch()", "WindowOrWorkerGlobalScope.fetch()")}}. Luego usamos el método {{domxref("blob()", "Body.blob()")}} para extraer el cuerpo de cada respuesta como un blob, dándonos una representación de objeto de los videos que se pueden almacenar y mostrar más adelante.</p>

  <p>Sin embargo, tenemos un problema aquí: estas dos solicitudes son asíncronas, pero solo queremos intentar mostrar o almacenar el video cuando ambas promesas se hayan cumplido. Afortunadamente, hay un método incorporado que maneja este problema: {{jsxref("Promise.all()")}}. Este toma un argumento, referencias a todas las promesas individuales que deseas verificar para su cumplimiento colocadas en un arreglo, y en sí mismo se basa en promesas.</p>

  <p>Cuando todas esas promesas se han cumplido, la promesa <code>all()</code> se cumple con un arreglo que contiene todos los valores de cumplimiento individuales. Dentro del bloque <code>all()</code>, puedes ver que luego llamamos a la función <code>displayVideo()</code> como lo hicimos antes para mostrar los videos en la interfaz de usuario, luego también llamamos a la función <code>storeVideo()</code> para almacenar esos videos dentro de la base de datos.</p>

  <pre class="brush: js notranslate">let mp4Blob = fetch('videos/' + video.name + '.mp4').then(response =&gt;
  response.blob()
);
let webmBlob = fetch('videos/' + video.name + '.webm').then(response =&gt;
  response.blob()
);

// Ejecuta el siguiente código solo cuando se hayan cumplido ambas promesas
Promise.all([mp4Blob, webmBlob]).then(function(values) {
  // muestra el video obtenido de la red con displayVideo()
  displayVideo(values[0], values[1], video.name);
  // lo almacena en el IDB usando storeVideo()
  storeVideo(values[0], values[1], video.name);
});</pre>
 </li>
 <li>
  <p>Veamos primero <code>storeVideo()</code>. Esto es muy similar al patrón que viste en el ejemplo anterior para agregar datos a la base de datos: abrimos una transacción <code>readwrite</code> y obtenemos una referencia a nuestro almacén de objetos <code>videos_os</code>, creamos un objeto que representa el registro para agregar a la base de datos, luego simplemente lo agrega usando {{domxref("IDBObjectStore.add()")}}.</p>

  <pre class="brush: js notranslate">función storeVideo(mp4Blob, webmBlob, nombre) {
  // Abre transacción, obtiene el almacén de objetos; lo convierte en lectura y escritura para que podamos escribir en el IDB
  let objectStore = db.transaction(['videos_os'], 'readwrite').objectStore('videos_os');
  // Crea un registro para agregar al IDB
  let record = {
    mp4 : mp4Blob,
    webm : webmBlob,
    name : name
  }

  // Agrega el registro al IDB usando add()
  let request = objectStore.add(record);

  ...

};</pre>
 </li>
 <li>
  <p>Por último, pero no menos importante, tenemos <code>displayVideo()</code>, que crea los elementos DOM necesarios para insertar el video en la interfaz de usuario y luego los agrega a la página. Las partes más interesantes de esto son las que se muestran a continuación: para mostrar realmente nuestros blobs de video en un elemento <code>&lt;video&gt;</code>, necesitamos crear URL de objeto (URL internas que apuntan a los blobs de video almacenados en la memoria) utilizando el método {{domxref("URL.createObjectURL()")}}. Una vez hecho esto, podemos configurar las URL del objeto para que sean los valores de los atributos <code>src</code> de nuestro elemento {{htmlelement("source")}}, y funciona bien.</p>

  <pre class="brush: js notranslate">function displayVideo(mp4Blob, webmBlob, title) {
  // Crea URL del objeto a partir de blobs
  let mp4URL = URL.createObjectURL(mp4Blob);
  let webmURL = URL.createObjectURL(webmBlob);

  ...

  const video = document.createElement('video');
  video.controls = true;
  const source1 = document.createElement('source');
  source1.src = mp4URL;
  source1.type = 'video/mp4';
  const source2 = document.createElement('source');
  source2.src = webmURL;
  source2.type = 'video/webm';

  ...
}</pre>
 </li>
</ol>

<h2 id="Almacenamiento_de_activos_sin_conexión">Almacenamiento de activos sin conexión</h2>

<p>El ejemplo anterior ya muestra cómo crear una aplicación que almacenará grandes activos en una base de datos <code>IndexedDB</code>, evitando la necesidad de descargarlos más de una vez. Esto ya es una gran mejora para la experiencia del usuario, pero todavía falta una cosa: los archivos HTML, CSS y JavaScript principales aún se deben descargar cada vez que se accede al sitio, lo cual significa que no funcionará cuando no haya conexión de red.</p>

<p><img alt="Fuera de línea" src="https://mdn.mozillademos.org/files/15759/ff-offline.png" style="border-style: solid; border-width: 1px; display: block; height: 307px; margin: 0px auto; width: 765px;"></p>

<p>Aquí es donde entran el {{web.link("/es/docs/Web/API/Service_Worker_API", "servicio workers")}} y la {{web.link("/es/docs/Web/API/Cache", "API de caché")}}.</p>

<p>Un servicio <em>worker</em> es un archivo JavaScript que, en pocas palabras, se registra con un origen en particular (sitio web o parte de un sitio web en un determinado dominio) cuando se accede a él mediante un navegador. Cuando se registra, puede controlar las páginas disponibles en ese origen. Para ello, se sienta entre una página cargada y la red e intercepta las solicitudes de red dirigidas a ese origen.</p>

<p>Cuando intercepta una solicitud, puede hacer lo que desees (consulta {{web.link("/es/docs/Web/API/Service_Worker_API#Other_use_case_ideas", "ideas de casos de uso")}}), pero el ejemplo clásico es guardar las respuestas de la red fuera de línea y luego proporcionarlas en respuesta a una solicitud en lugar de las respuestas de la red. De hecho, te permite hacer que un sitio web funcione completamente fuera de línea.</p>

<p>La API de caché es otro mecanismo de almacenamiento del lado del cliente, con una pequeña diferencia: está diseñada para guardar respuestas HTTP y, por lo tanto, funciona muy bien con el servicio <em>workers</em>.</p>

<div class="note">
<p><strong>Nota</strong>: El servicio <em>workers</em> y la memoria caché ahora son compatibles con la mayoría de los navegadores modernos. Al momento de escribir este artículo, Safari todavía estaba ocupado implementándolo, pero debería estar allí pronto.</p>
</div>

<h3 id="Un_ejemplo_del_servicio_worker">Un ejemplo del servicio <em>worker</em></h3>

<p>Veamos un ejemplo para darte una idea de cómo se vería esto. Hemos creado otra versión del ejemplo del almacén de videos que vimos en la sección anterior; este funciona de manera idéntica, excepto que también guarda HTML, CSS y JavaScript en la API de caché a través de un servicio <em>worker</em>, lo que permite que el ejemplo se ejecute sin conexión.</p>

<p>Ve <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/">almacén de videos IndexedDB con servicio worker funcionando en vivo</a> y también <a href="https://github.com/mdn/learning-area/tree/master/javascript/apis/client-side-storage/cache-sw/video-store-offline">ve el código fuente</a>.</p>

<h4 id="Registrar_el_servicio_worker">Registrar el servicio <em>worker</em></h4>

<p>Lo primero que hay que tener en cuenta es que hay un fragmento adicional de código colocado en el archivo JavaScript principal (consulta <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.js">index.js</a>). Primero hacemos una prueba de detección de características para ver si el miembro <code>serviceWorker</code> está disponible en el objeto {{domxref("Navigator")}}. Si esto devuelve <code>true</code>, entonces sabemos que al menos se respaldan los conceptos básicos del servicio <em>workers</em>. Aquí adentro usamos el método {{domxref("ServiceWorkerContainer.register )")}} para registrar un servicio <em>worker</em> contenido en el archivo <code>sw.js</code> contra el origen en el que reside, para que pueda controlar páginas en el mismo directorio que él, o subdirectorios. Cuando se cumple su promesa, el trabajador del servicio se considera registrado.</p>

<pre class="brush: js notranslate">  // Registrar el servicio workers para controlar que el sitio funcione sin conexión

  if('serviceWorker' in navigator) {
    navigator.serviceWorker
             .register('/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js')
             .then(function() { console.log('Servicio Worker Registrado'); });
  }</pre>

<div class="note">
<p><strong>Nota</strong>: La ruta proporcionada al archivo <code>sw.js</code> es relativa al origen del sitio, no al archivo JavaScript que contiene el código. El servicio <em>worker</em> está en <code>https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js</code>. El origen es <code>https://mdn.github.io</code> y, por lo tanto, la ruta dada debe ser <code>/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js</code>. Si quisieras alojar este ejemplo en tu propio servidor, tendrías que cambiarlo consecuentemente. Esto es bastante confuso, pero tiene que funcionar de esta manera por razones de seguridad.</p>
</div>

<h4 id="Instalación_del_servicio_worker">Instalación del servicio <em>worker</em></h4>

<p>La próxima vez que se accede a cualquier página bajo el control del servicio <em>worker</em> (por ejemplo, cuando se vuelve a cargar el ejemplo), el servicio <em>worker</em> se instala en esa página, lo cual significa que comenzará a controlarla. Cuando esto ocurre, se dispara un evento <code>install</code> contra el servicio <em>worker</em>; puedes escribir código dentro del propio servicio <em>worker</em> que responderá a la instalación.</p>

<p>Veamos un ejemplo, en el archivo <a href="https://github.com/mdn/learning-area/blob/master/javascript/apis/client-side-storage/cache-sw/video-store-offline/sw.js">sw.js</a> (el servicio <em>worker</em>). Verás que el detector de instalación está registrado en <code>self</code>. Esta palabra clave <code>self</code> es una forma de hacer referencia al alcance global del servicio <em>worker</em> desde el interior del archivo del servicio <em>worker</em>.</p>

<p>Dentro del controlador <code>install</code> usamos el método {{domxref("ExtendableEvent.waitUntil()")}}, disponible en el objeto <code>event</code>, para indicar que el navegador no debe completar la instalación del servicio <em>worker</em> hasta que la promesa interior se haya cumplido con éxito.</p>

<p>Aquí es donde vemos en acción la API de <code>Cache</code>. Usamos el método {{domxref("CacheStorage.open()")}} para abrir un nuevo objeto <code>Cache</code> en el que se pueden almacenar las respuestas (similar a un almacén de objetos <code>IndexedDB</code>). Esta promesa se cumple con un objeto {{domxref("Cache")}} que representa la caché de <code>video-store</code>. Luego usamos el método {{domxref("Cache.addAll()")}} para obtener una serie de activos y agregar sus respuestas a la caché.</p>

<pre class="brush: js notranslate">self.addEventListener('install', function(e) {
 e.waitUntil(
   caches.open('video-store').then(function(cache) {
     return cache.addAll([
       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/',
       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.html',
       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/index.js',
       '/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/style.css'
     ]);
   })
 );
});</pre>

<p>Eso es todo por ahora, instalación terminada.</p>

<h4 id="Responder_a_más_solicitudes">Responder a más solicitudes</h4>

<p>Con el servicio <em>worker</em> registrado e instalado en nuestra página HTML, y todos los activos relevantes agregados a nuestra caché, estamos casi listos para comenzar. Solo queda una cosa más por hacer, escribir código para responder a más solicitudes de red.</p>

<p>Esto es lo que hace el segundo bit de código en <code>sw.js</code>. Agregamos otro escucha al ámbito global del servicio <em>worker</em>, que ejecuta la función del controlador cuando se genera el evento <code>fetch</code>. Esto sucede cada vez que el navegador solicita un activo en el directorio en el que está registrado el servicio <em>worker</em>.</p>

<p>Dentro del controlador, primero registramos la URL del activo solicitado. Luego proporcionamos una respuesta personalizada a la solicitud, utilizando el método {{domxref("FetchEvent.respondWith()")}}.</p>

<p>Dentro de este bloque usamos {{domxref("CacheStorage.match()")}} para verificar si una solicitud coincidente (es decir, coincide con la URL) se puede encontrar en cualquier caché. Esta promesa se cumple con la respuesta coincidente si se encuentra una coincidencia, o <code>undefined</code> si no lo es.</p>

<p>Si se encuentra una coincidencia, simplemente la devolvemos como la respuesta personalizada. De lo contrario, {{web.link("/es/docs/Web/API/WindowOrWorkerGlobalScope/fetch", "fetch()")}} la respuesta de la red y la devolvemos en su lugar.</p>

<pre class="brush: js notranslate">self.addEventListener('fetch', function(e) {
  console.log(e.request.url);
  e.respondWith(
    caches.match(e.request).then(function(response) {
      return response || fetch(e.request);
    })
  );
});</pre>

<p>Y eso es todo para nuestro sencillo servicio <em>worker</em>. Hay muchas más cosas que puedes hacer con ellos; para obtener más detalles, consulta el <a href="https://serviceworke.rs/">libro de recetas para el servicio <em>worker</em></a>. Y gracias a Paul Kinlan por su artículo <a href="https://developers.google.com/web/fundamentals/codelabs/offline/">Agregar un servicio <em>worker</em> y sin conexión a tu aplicación web</a>, que inspiró este sencillo ejemplo.</p>

<h4 id="Probando_el_ejemplo_sin_conexión">Probando el ejemplo sin conexión</h4>

<p>Para probar nuestro <a href="https://mdn.github.io/learning-area/javascript/apis/client-side-storage/cache-sw/video-store-offline/">ejemplo de servicio <em>worker</em></a>, deberás cargarlo un par de veces para asegurarte de que esté instalado. Una vez hecho esto, puedes:</p>

<ul>
 <li>Intenta desconectar tu red/apagar tu <em>Wifi</em>.</li>
 <li>Selecciona <em>Archivo → Trabajar sin conexión</em> si estás usando Firefox.</li>
 <li>Ve a <em>devtools</em>, luego elige <em>Aplicación → Servicio worker</em>, luego marca la casilla de verificación <em>Sin conexión</em> si estás usando Chrome.</li>
</ul>

<p>Si actualizas tu página de ejemplo nuevamente, deberías ver que se carga bien. Todo se almacena sin conexión: los activos de la página en una caché y los videos en una base de datos <code>IndexedDB</code>.</p>

<h2 id="Resumen">Resumen</h2>

<p>Eso es todo por ahora. Esperamos que hayas encontrado útil nuestro resumen de las tecnologías de almacenamiento de lado del cliente.</p>

<h2 id="Ve_también">Ve también</h2>

<ul>
 <li>{{web.link("/es/docs/Web/API/Web_Storage_API", "API de almacenamiento Web")}}</li>
 <li>{{web.link("/es/docs/Web/API/IndexedDB_API", "API IndexedDB")}}</li>
 <li>{{web.link("/es/docs/Web/HTTP/Cookies", "Cookies")}}</li>
 <li>{{web.link("/es/docs/Web/API/Service_Worker_API", "API del servicio worker")}}</li>
</ul>

<p>{{PreviousMenu("Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "Learn/JavaScript/Client-side_web_APIs")}}</p>

<h2 id="En_este_módulo">En este módulo</h2>

<ul>
 <li>{{web.link("/es/docs/Learn/JavaScript/Client-side_web_APIs/Introduction", "Introducción a las APIs web")}}</li>
 <li>{{web.link("/es/docs/Learn/JavaScript/Client-side_web_APIs/Manipulating_documents", "Manipulación de documentos")}}</li>
 <li>{{web.link("/es/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data", "Obtener datos del servidor")}}</li>
 <li>{{web.link("/es/docs/Learn/JavaScript/Client-side_web_APIs/Third_party_APIs", "API de terceros")}}</li>
 <li>{{web.link("/es/docs/Learn/JavaScript/Client-side_web_APIs/Drawing_graphics", "Dibujar gráficos")}}</li>
 <li>{{web.link("/es/docs/Learn/JavaScript/Client-side_web_APIs/Video_and_audio_APIs", "APIs de video y audio")}}</li>
 <li>{{web.link("/es/docs/Learn/JavaScript/Client-side_web_APIs/Client-side_storage", "Almacenamiento de lado del cliente")}}</li>
</ul>