Visualiza y cambia los datos de IndexedDB

Kayce Basques
Kayce Basques

En esta guía, se muestra cómo usar las Herramientas para desarrolladores de Chrome para ver y cambiar los 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 Cómo usar IndexedDB.

Cómo ver datos de IndexedDB

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

    El menú IndexedDB

    Figura 1. El menú IndexedDB

    • Ícono de base de datos notes - https://mdn.github.io representa una base de datos, en la que 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.
    • Ícono de almacén de objetos 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.

    La base de datos "notes"

    Figura 2. La base de datos notes

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

    El almacén de objetos "notes"

    Figura 3. El almacén de objetos notes

    • Total de entradas es la cantidad total de pares clave-valor en el almacén de objetos.
    • 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.

    Cómo ver un valor de IndexedDB

    Figura 4. Cómo ver un valor de IndexedDB

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

    Cómo ordenar un almacén de objetos por un índice

    Figura 5. Un almacén de objetos que se ordena alfabéticamente según su clave title

Actualiza los datos de IndexedDB

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

Visualiza una base de datos

Figura 6. Visualiza una base de datos

Cómo editar datos de IndexedDB

Las claves y los valores de IndexedDB no se pueden editar desde el panel Aplicación. Sin embargo, como las Herramientas para desarrolladores tienen acceso al contexto de la página, puedes ejecutar código de JavaScript en ellas para editar los datos de IndexedDB.

Edita 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 edite una base de datos de IndexedDB.

Usa un fragmento para interactuar con IndexedDB

Figura 7. Usa un fragmento para interactuar con IndexedDB

Borra datos de IndexedDB

Borra un par clave-valor de IndexedDB

  1. Cómo ver un almacén de objetos de IndexedDB.
  2. Haz clic en el par clave-valor que quieras borrar. Las Herramientas para desarrolladores lo destacan en azul para indicar que está seleccionado.

    Selecciona un par clave-valor para borrarlo

    Figura 8. Selecciona un par clave-valor para borrarlo

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

    Cómo se ve el almacén de objetos después de que se borra el par clave-valor

    Figura 9. Cómo se ve el almacén de objetos después de que se borra el par clave-valor

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

  1. Cómo ver un almacén de objetos de IndexedDB.

    Visualiza un almacén de objetos

    Figura 10: Visualiza un almacén de objetos

  2. Haz clic en Borrar almacén de objetos Borrar almacén de objetos.

Borra una base de datos de IndexedDB

  1. Visualiza la base de datos de IndexedDB que quieres borrar.
  2. Haz clic en Borrar base de datos.

    El botón "Borrar base de datos"

    Figura 11: El botón Borrar base de datos

Borra todo el almacenamiento de IndexedDB

  1. Abre el panel Liberar almacenamiento.
  2. Asegúrate de que la casilla de verificación IndexedDB esté habilitada.
  3. Haz clic en Borrar datos del sitio.

    El panel 'Liberar almacenamiento'

    Figura 12: El panel Liberar espacio de almacenamiento