Ver y cambiar los datos de IndexedDB

Para ver y cambiar los datos de IndexedDB , use la herramienta Aplicación .

Visualización de datos de IndexedDB

  1. Abra una página web que use IndexedDB en una nueva ventana o pestaña. Puede usar la aplicación de demostración PWAmp.

  2. Para abrir DevTools, haga clic con el botón derecho en la página web y, a continuación, seleccione Inspeccionar. O bien, presione Ctrl+Mayús+I (Windows, Linux) o Comando+Opción+I (macOS). Se abre DevTools.

  3. En DevTools, en la barra de actividad, seleccione la pestaña Aplicación . Si esa pestaña no está visible, haga clic en el botón Más herramientas (icono Más herramientas).

    Normalmente, el panel Manifiesto se abre de forma predeterminada:

    Panel Manifiesto de la herramienta Aplicación

  4. En la barra lateral, en Almacenamiento, expanda el menú IndexedDB para ver qué bases de datos están disponibles:

    Menú IndexedDB

    • (Icono de base de datos) keyval-store representa una base de datos.

    • (Icono del Almacén de objetos) keyval es un almacén de objetos en la base de datos.

  5. Seleccione la keyval-store base de datos para ver su origen, número de versión y otra información sobre la base de datos:

    Información sobre la base de datos keyval-store, en la herramienta Application

  6. Haga clic en el keyval almacén de objetos para ver los pares clave-valor:

    Almacén de objetos de notas

    Nota: Los datos indexados deDB no se actualizan en tiempo real. Si ve datos obsoletos en un almacén de objetos, actualice la vista del almacén de objetos. Consulte Actualizar datos de IndexedDB.

  7. Haga clic en una celda de la columna Valor para expandir el valor:

    Visualización de un valor de IndexedDB

Actualizar datos de IndexedDB

Los valores indexados deDB en la herramienta Application no se actualizan en tiempo real.

  • Para actualizar los datos, vea un almacén de objetos y, a continuación, haga clic en el botón Actualizar (actualizar).

  • Para actualizar todos los datos de una base de datos IndexedDB, vea una base de datos y, a continuación, haga clic en Actualizar base de datos:

    La vista de base de datos, con el botón actualizar

Edición de datos indexadosdb

Las claves y los valores de IndexedDB no se pueden editar desde la herramienta Application . Sin embargo, dado que DevTools tiene acceso al contexto de página, puede ejecutar código JavaScript en DevTools para editar los datos almacenados en una base de datos IndexedDB.

Edición de datos de IndexedDB mediante la herramienta Consola

  1. En DevTools, en la barra de actividad, seleccione la pestaña Consola .

  2. En la herramienta Consola , ejecute código JavaScript para editar los datos de IndexedDB. Por ejemplo, para agregar un nuevo valor al almacén de keyval objetos, ejecute el código siguiente:

    let connection = indexedDB.open("keyval-store", 1);
    
    connection.onsuccess = e => {
      const database = e.target.result;
      const transaction = database.transaction("keyval", "readwrite");
      const objectStore = transaction.objectStore("keyval");
      const request = objectStore.add({foo: "bar"}, "new-key");
      request.onsuccess = e => {
        console.log(e.target.result);
      }
    }
    

Edición de datos indexadosdb mediante fragmentos de código

Los fragmentos de código son una manera de almacenar y ejecutar código JavaScript repetidamente, dentro de DevTools. Si necesita editar los datos de IndexedDB con frecuencia, almacénelos en un nuevo fragmento de código y, a continuación, ejecute el fragmento de código. Para más información, consulte Ejecución de fragmentos de código de JavaScript en cualquier página web.

Uso de un fragmento de código para interactuar con IndexedDB

Eliminación de datos IndexedDB

Puede eliminar cualquiera de las siguientes opciones:

  • Par clave-valor de IndexedDB.
  • Todos los pares clave-valor de un almacén de objetos.
  • Base de datos IndexedDB.
  • Todo el almacenamiento de IndexedDB.

Estas opciones se describen a continuación.

Eliminación de un par clave-valor de IndexedDB

  1. Ver un almacén de objetos IndexedDB.

  2. Haga clic en el par clave-valor que desea eliminar. DevTools resalta el par clave-valor para indicar que está seleccionado:

    Se selecciona un elemento de par clave-valor en la vista de almacén de objetos.

  3. Presione Deleteo haga clic en el botón Eliminar seleccionado (icono Eliminar seleccionado):

    Botón Eliminar valor de clave de la barra de herramientas de la vista del almacén de objetos

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

  1. Ver un almacén de objetos IndexedDB.

  2. Haga clic en el botón Borrar almacén de objetos (Borrar almacén de objetos).

    Botón borrar almacén de objetos de la barra de herramientas de la vista de almacén de objetos

Eliminación de una base de datos IndexedDB

  1. Vea la base de datos IndexedDB que desea eliminar.

  2. Haga clic en Eliminar base de datos.

    Botón Eliminar base de datos

Eliminación de todo el almacenamiento de IndexedDB

  1. En la barra lateral de la herramienta Aplicación , haga clic en Almacenamiento.

  2. Desplácese hacia abajo hasta las casillas De almacenamiento y asegúrese de que la casilla IndexedDB está seleccionada.

  3. Haga clic en el botón Borrar datos del sitio .

    El panel Almacenamiento, que muestra las distintas casillas de almacenamiento y el botón Borrar datos del sitio

Nota:

Las partes de esta página son modificaciones basadas en el trabajo creado y compartido por Google y usadas según los términos descritos en la licencia internacional creative Commons Attribution 4.0. La página original se encuentra aquí y está creada por Kayce Basques (Technical Writer, Chrome DevTools & Lighthouse).

Licencia de Creative Commons Esta obra está licenciada bajo una Licencia Internacional Creative Commons Attribution 4.0.