Almacenar datos en una aplicación web es tan fácil como llamar a localStorage

Si no recuerdo mal, en mi último artículo -y el primero que escribo este año- comenté que esperaba no escribir tanto contenido sobre desarrollo web... pero fallé. Honestamente esperaba no hacerlo, pero no puedo evitar tener demasiadas ganas de contarle a todos sobre la propiedad localStorage en Javascript. Esta propiedad facilita considerablemente la tediosa actividad de almacenar datos de usuarios en un proyecto de Javascript -junto con sus frameworks-. Básicamente, al llamar a la propiedad localStorage tenemos acceso a una "mini" base de datos no relacional, específicamente, una base de datos no relacional basada en una estructura de "llave-valor" o "key-value", que podemos utilizar para guardar todo tipo de información que no se pierde al cerrar sesión o quitar la ventana del proyecto.

Esto puede sonar impresionante, pero es verdad. En lugar de necesitar toda una API que se pueda conectar a una base de datos que necesite guardar cosas tan triviales como una propiedad para saber si un usuario está usando el tema claro u oscuro del proyecto, únicamente necesitamos llamar a esta increíblemente útil propiedad para guardar un dato de cualquier otro asociado a una llave (usualmente un string). Si no crees que esto puede ser tan fácil, no te preocupes, en este artículo haré una demo extremadamente sencilla de seguir que nos permitirá crear, leer, actualizar y eliminar datos mediante localStorage y en la que únicamente se utilizará un archivo «.html y un archivo «.js -personalmente, también mejoré los estilos de un par de cosas con un archivo .css, pero en términos prácticos no es importante para usar localStorage- ¡Espero que esta demo te sirva!

Si resulta útil, considero que debes tener conocimientos muy básicos de HTML y Javascript para seguir esta demo. Sinceramente, también funcionaría perfectamente si sólo copias el código así sin más, pero considero que lo más importante es realmente reflexionar sobre qué hace cada parte del código y comprender bien el funcionamiento de localStorage. Algunos temas que debes saber para seguir la demo son:

• Etiquetas y atributos básicos de HTML (head, body, button, script, link...)
• Sintaxis básica de Javascript (const, arrow functions...)
• Manejo básico del DOM en Javascript (querySelector, addEventListener...)

En primer lugar, necesitamos una página, por lo que procederemos a crear un archivo index.html en el que únicamente tendremos un poco de código boilerplate con cuatro botones y un script en el cuerpo de la página. Nuestro archivo .html se verá más o menos así:

Posteriormente, ya con estos cuatro botones, primero debemos seleccionarlos en el archivo script.js creado en la misma carpeta en la que se encuentra nuestro index.html. Como se les dio un atributo class a cada uno de los botones del index.html, podemos seleccionarlos utilizando la función «document.querySelector» de Javascript. Finalmente, crearemos cuatro funciones que llamen a los diferentes métodos de localStorage para agregarlas como eventos a cada uno de los respectivos botones del «index.html». Al realizar todo esto, el código de nuestro archivo «script.js» se verá así:

A partir de este punto, me veo en la necesidad de explicar qué hacen los tres métodos que podemos observar cuando se realizan llamadas a localStorage. Estos eventos son los siguientes tres, y son súper fáciles de comprender:

• localStorage.setItem: A este método se le pasan dos argumentos. El primero es la llave con la que podremos acceder a un determinado dato, y el segundo es el dato en sí. De esta forma, se guardará un objeto en el localStorage que tenga la forma '<llave>': <valor>. En el ejemplo, se está guardando la variable darkMode (que es true) con el nombre 'darkMode'. Cabe aclarar que si el primer argumento es un nombre que ya está como llave en el localStorage, este elemento sólo se actualizará en lugar de crearse un duplicado; por eso este método se usa tanto para crear como para actualizar elementos almacenados.
• localStorage.getItem: Este método sólamente recibe un parámetro, y este es el nombre o la llave del dato al que queramos acceder. En este caso, si le pasamos como argumento '<llave>', nos devolverá el dato <valor>. En el ejemplo, estamos imprimiendo en la consola el texto 'darkMode is', acompañado de la consulta de qué valor tiene asignada la llave 'darkMode'. Este valor es true.
• localStorage.removeItem: Únicamente recibe como argumento el nombre de la llave del dato a eliminar. Si le pasamos como argumento '<llave>', eliminará el par '<llave>': <valor> del localStorage. En el ejemplo, se está eliminando la llave 'darkMode', por lo que toda la estructura 'darkMode': true se eliminará del localStorage.

Con estos métodos comprendidos, pasemos a ver cómo funciona el pequeño proyecto que hemos desarrollado sólo con estos dos archivos. En primer lugar, es necesario inspeccionar la página presionando Ctrl + Shift + I y dirigirnos a la pestaña de Application o Aplicación. Al abrir esta pestaña, el proyecto se ve así (con los estilos que escribí para los botones):

(lamento si no se ve tan bien, culpa de Blogger)

Al presionar el botón «Create!», crearemos la propiedad darkMode en el localStorage, y su valor será igual a true. Al dar click en el botón, observaremos el siguiente resultado.

Efectivamente, la propiedad darkMode fue creada y se le asignó el valor true, justo como esperábamos. Ahora podemos darle click al botón «Read!» para imprimir el valor true en la consola de las herramientas del navegador. Al dar click a «Read!», observaremos lo siguiente en la pestaña Console o Consola.

Nuevamente podemos observar que el botón funciona correctamente. El texto "darkMode is true" es justo lo que esperábamos ver. Ahora procedamos a actualizar el valor de "darkMode" con el botón «Update!». Al darle click, deberíamos ver cómo el valor pasa de true a false.

Volvió a ocurrir justo lo que esperábamos. El valor de "darkMode" pasó a ser falso en lugar de verdadero. Finalmente nos queda darle click al botón «Delete!» para ver cómo la propiedad desaparece. Al dar click, podremos ver el siguiente resultado.

Y de esta forma, hemos desarrollado una aplicación que perfectamente puede crear, leer, actualizar y eliminar valores en un almacenamiento que se mantiene funcionando correctamente sin eliminar ningún elemento al cerrar la ventana. Así de sencillo.

Al final del día, es impresionante cómo Javascript nos proporciona una herramienta tan útil y, hasta cierto punto, infravalorada. He visto localStorage ser utilizado en producción para almacenar múltiples datos respecto a preferencias de un usuario sobre su experiencia en la página que se encuentre utilizando. El ejemplo de almacenamiento del modo oscuro de la página es sólo un ejemplo de las infintas utilidades que tiene utilizar localStorage.

Nuevamente, espero que esta pequeña demo te sirva para utilizar localStorage con el objetivo de almacenar datos que talvez no sean tan importantes como para almacenarlos en una base de datos más formal. ¡Nos vemos!

- Zant

Páginas consultadas:

- https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage