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
Abra una página web que use IndexedDB en una nueva ventana o pestaña. Puede usar la aplicación de demostración PWAmp.
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.
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 ().
Normalmente, el panel Manifiesto se abre de forma predeterminada:
En la barra lateral, en Almacenamiento, expanda el menú IndexedDB para ver qué bases de datos están disponibles:
()
keyval-store
representa una base de datos.()
keyval
es un almacén de objetos en la base de datos.
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:Haga clic en el
keyval
almacén de objetos para ver los pares clave-valor: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.
Haga clic en una celda de la columna Valor para expandir el valor:
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 ().
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:
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
En DevTools, en la barra de actividad, seleccione la pestaña Consola .
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.
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
Haga clic en el par clave-valor que desea eliminar. DevTools resalta el par clave-valor para indicar que está seleccionado:
Presione
Delete
o haga clic en el botón Eliminar seleccionado ():
Eliminar todos los pares clave-valor de un almacén de objetos
Haga clic en el botón Borrar almacén de objetos ().
Eliminación de una base de datos IndexedDB
Vea la base de datos IndexedDB que desea eliminar.
Haga clic en Eliminar base de datos.
Eliminación de todo el almacenamiento de IndexedDB
En la barra lateral de la herramienta Aplicación , haga clic en Almacenamiento.
Desplácese hacia abajo hasta las casillas De almacenamiento y asegúrese de que la casilla IndexedDB está seleccionada.
Haga clic en 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).
Esta obra está licenciada bajo una Licencia Internacional Creative Commons Attribution 4.0.