Ya tenemos todos nuestros objetos almacenados, pero... ¿Qué pasa si necesito eliminar alguno de ellos? Es completamente lógico que, en cualquier base de datos, en algún momento surja la necesidad de eliminar información almacenada, es decir, objetos. Por eso, el tema del blog de hoy es: ¿Cómo eliminar objetos almacenados?
Este será un blog bastante conciso, ya que para eliminar un objeto solo se necesita el método delete(). Por supuesto, como siempre, tenemos un código de inicio que es el resultado de los blogs anteriores. Así que, sin más preámbulos, aquí te dejo el código y seguimos a continuación.
Código de partida: HTML y CSS
Código de partida: JavaScript
Creación del Botón "BORRAR" en IndexedDB
El primer paso que debemos tomar una vez que hayas copiado el código de inicio es crear un botón que nos permita eliminar los objetos deseados, en nuestro caso, los contactos. Para este ejemplo, simplemente vamos a crear el botón BORRAR al mostrar la lista de contactos almacenados, es decir, en la función MostrarContactos(). Después de generar el botón EDITAR, vamos a crear este nuevo botón BORRAR. Para ello, solo necesitamos duplicarlo y realizar algunos pequeños cambios. Le asignamos la clase btn-borrar, el valor Borrar y en el evento click, queremos que se ejecute la función eliminarContacto(). Es crucial pasar la llave del objeto como parámetro. Si estás duplicando el botón y haciendo los cambios automáticamente, la llave ya se pasa como parámetro, pero si lo estás creando manualmente, es esencial hacerlo para que funcione correctamente. A continuación, te presento esta función con ese cambio implementado.
Implementando la Función "eliminarContacto" en IndexedDB
Una vez que tengamos el botón listo, necesitamos declarar la función que se ejecutará cuando se haga clic en él. En nuestro caso, se trata de eliminarContacto(). Recordemos que le estamos pasando la llave del objeto como parámetro, por lo que la función se verá así: (function eliminarContacto(key){}). Dentro de la función, el primer paso es iniciar una transacción. Hemos repasado este proceso en varios blogs anteriores, por lo que no profundizaré en cada paso. Básicamente, esto se logra utilizando el método transaction(). Dentro de este método, especificamos el almacén en el que realizaremos la transacción y el tipo de transacción que queremos. Esta línea de código se vería así: (var transaccion = bd.transaction(["Contactos"], "readwrite")). El segundo paso en cada transacción es abrir el almacén para poder trabajar con los objetos almacenados. Esto se logra utilizando el método objectStore(). Dentro de este método, solo necesitamos especificar el almacén y listo. La línea de código se vería así: (var almacen = transaccion.objectStore("Contactos")). A continuación, te presento estos pasos con mayor claridad.
Usando el Método "delete()" en IndexedDB
Una vez que todo está preparado para realizar la transacción, solo nos queda indicar cuál será la solicitud, que en este caso es eliminar el objeto (contacto). Como mencioné al principio de este blog, para eliminar un objeto solo necesitamos especificar qué objeto deseamos borrar utilizando el método delete(). Vamos a ello. Primero, declaramos la variable solicitud, luego mencionamos el almacén y, por último, utilizamos el método delete() y dentro de este método, especificamos la llave del objeto. Recordemos que nombramos la llave como key, por lo que quedaría de la siguiente manera: (var solicitud = almacen.delete(key)). A continuación, te proporciono la función con esta mejora implementada para que la copies en tu editor de código y veas cómo funciona.
Actualización Automática con el Evento "complete"
Si copiaste esta función en tu editor, actualizaste e intentaste eliminar algún contacto, habrás notado que aparentemente no se borra de inmediato. Sin embargo, si actualizas la ventana, verás que efectivamente, el objeto ya no existe. Para que la lista de contactos se actualice automáticamente al borrar un objeto, necesitamos agregar un Event Listener a la transacción que responda al evento "complete" y que luego ejecute la función "Mostrar()". Recuerda que ya habíamos implementado esto en la función "AlmacenarContacto()" para que cada vez que se almacenara un objeto nuevo, la lista se actualizara. A continuación, te muestro cómo se realiza esta línea de código, que no es nueva para nosotros: (transaccion.addEventListener("complete", Mostrar)).
A continuación, te dejo la función completa para que simplemente la copies en tu editor y observes cómo funciona.
Repasando lo Aprendido
Durante este blog, nos adentramos en la gestión y eliminación de objetos en IndexedDB. A continuación, te presento un resumen de los puntos clave para que tengas una visión clara y rápida de todo lo discutido.
🚀 Resumen Rápido: Eliminando Objetos en IndexedDB
- Creación del Botón "BORRAR": Un botón que permite eliminar contactos almacenados, integrado en la función "MostrarContactos()".
- Función eliminarContacto(key): Esta función se encarga de la eliminación del objeto, usando la llave proporcionada.
- Iniciar una Transacción: El proceso inicial en la eliminación del objeto, utilizando el método transaction().
- Abrir el Almacén: Usando el método objectStore() para acceder y trabajar con los objetos almacenados.
- Eliminar Objetos Específicos: Especificar qué objeto se desea borrar usando la llave del objeto con el método delete().
- Actualización Automática: Para que la lista de contactos se refresque automáticamente después de borrar un objeto.
¡Gracias por Acompañarme!
Pues bien, Coder, si has copiado el código en tu editor, seguramente habrás notado que todo funciona perfectamente. Ahora, simplemente te pido que, si has disfrutado de este blog, me lo hagas saber a través de la pestaña Contacto en la parte superior de la página. Tus comentarios y retroalimentación son muy valiosos para mí. Así que, sin más que agregar, espero que hayas aprendido algo nuevo, que hayas disfrutado del contenido y nos leemos en el siguiente.
¡Un Abrazo! Braulio de AprendeCode.