Visualiza y cambia los datos de IndexedDB

Kayce Basques

En esta guía, se muestra cómo usar las herramientas para desarrolladores de Chrome para ver y cambiar datos de IndexedDB. Se da por sentado que estás familiarizado con las Herramientas para desarrolladores. De lo contrario, consulta Cómo comenzar. También se supone que estás familiarizado con IndexedDB. De lo contrario, consulta Usa IndexedDB.

Visualiza los datos de IndexedDB

1. Haz clic en la pestaña Aplicación para abrir el panel Aplicación. Expande el menú IndexedDB para ver qué bases de datos están disponibles.

   

   Figura 1: Menú IndexedDB

   • notes: https://mdn.github.io representa una base de datos, donde notes es el nombre de la base de datos y https://mdn.github.io es el origen que puede acceder a la base de datos.
   • notes es un almacén de objetos.
   • title y body son índices.

1. Haz clic en una base de datos para ver su origen y número de versión.

   

   Figura 2. La base de datos notes

2. Haz clic en un almacén de objetos para ver sus pares clave-valor.

   

   Figura 3. El almacén de objetos notes.

   • Las entradas totales son la cantidad total de pares clave-valor en el almacén de objetos.
   • El valor del generador de claves es la siguiente clave disponible. Este campo solo se muestra cuando se usan generadores de claves.

3. Haz clic en una celda de la columna Valor para expandir ese valor.

   

   Figura 4. Visualiza un valor de IndexedDB

4. Haz clic en un índice, como title o body en la figura 6 a continuación, para ordenar el almacén de objetos de acuerdo con los valores de ese índice.

   

   Figura 5. Un almacén de objetos que está ordenado alfabéticamente según su clave title

Actualizar datos de IndexedDB

Los valores de IndexedDB del panel Application no se actualizan en tiempo real. Haz clic en Refresh cuando veas un almacén de objetos para actualizar sus datos, o visualiza una base de datos y haz clic en Refresh database para actualizar todos los datos.

Figura 6. Consulta una base de datos

Edita los datos de IndexedDB

Las claves y los valores de IndexedDB no se pueden editar desde el panel Application. Sin embargo, como las Herramientas para desarrolladores tiene acceso al contexto de la página, puedes ejecutar el código JavaScript dentro de Herramientas para desarrolladores que edite los datos de IndexedDB.

Cómo editar datos de IndexedDB con fragmentos

Los fragmentos son una forma de almacenar y ejecutar bloques de código JavaScript en las Herramientas para desarrolladores. Cuando ejecutas un fragmento, el resultado se registra en la consola. Puedes usar un fragmento para ejecutar código JavaScript que edita una base de datos IndexedDB.

Figura 7: Cómo usar un fragmento para interactuar con IndexedDB

Borra los datos de IndexedDB

Borra un par clave-valor de IndexedDB

1. Visualiza un almacén de objetos IndexedDB.

2. Haz clic en el par clave-valor que quieras borrar. Herramientas para desarrolladores lo destaca en azul para indicar que está seleccionado.

   

   Figura 8: Selecciona un par clave-valor para borrarlo

3. Presiona la tecla Borrar o haz clic en Borrar los elementos seleccionados .

   

   Figura 9: Cómo se ve el almacén de objetos después de borrar el par clave-valor

Borrar todos los pares clave-valor de un almacén de objetos

1. Visualiza un almacén de objetos IndexedDB.

   

   Figura 10: Visualiza un almacén de objetos

2. Haz clic en Clear object store .

Borra una base de datos IndexedDB

1. Visualiza la base de datos IndexedDB que deseas borrar.

2. Haz clic en Borrar base de datos.

   

   Figura 11: El botón Borrar base de datos

Borrar todo el almacenamiento de IndexedDB

1. Abre el panel Liberar espacio de almacenamiento.
2. Asegúrate de que la casilla de verificación IndexedDB esté habilitada.

3. Haz clic en Borrar datos del sitio.

   

   Figura 12: El panel Liberar espacio de almacenamiento