El almacenamiento de datos en el navegador usando JavaScript, además de las cookies, ya es una cosa que salió hace mucho tiempo. Sin embargo, muchas personas todavía no conocen sobre el tema o saben poco sobre el mismo.
Es por eso que en este post voy a explicar cómo trabajar con la API de localStorage en JavaScript para almacenar datos en el navegador del usuario, pero lo más importante es que estos datos van a persistir aunque el navegador se cierre o se actualice.
Nota: si quieres ver un ejemplo de localStorage mira este generador de UML.
Al momento de escribir este post, cualquier navegador decente soporta la tecnología localStorage en JavaScript, aunque para estar seguros veremos una forma de comprobar si el navegador lo soporta.
Hace mucho tiempo utilicé PouchDB para un proyecto que hice; pues esa librería de JavaScript es parecida a esto que veremos (aunque PouchDB es mejor y más robusta) ya que permite guardar datos de forma local.
Si quieres ver un ejemplo de PouchDB mira este ejemplo que hice.
En los ejemplos uso funciones flecha y declaro algunas variables con let
, mira los posts si quieres:
Let, const y var en JavaScript
Bueno, comencemos por ver si el navegador soporta localStorage. Como lo dije, cualquier navegador decente debe soportar esto. Mira la página de Can I Use para más información sobre el soporte.
No te preocupes por el código, más abajo lo vas a entender.
Lo que estamos haciendo primero es ver si existe el objeto localStorage
; pero que exista no significa que funcione, así que aparte de ello intentamos alojar y luego eliminar un elemento; si no se genera una excepción entonces significa que localStorage funciona como un encanto.
localStorage va a almacenar los datos como cadena, llamando al método toString
del objeto que le pasemos. Por ello es que no debemos confiar en que va a respetar los tipos de dato; es decir, si le pasamos un entero, al recuperarlo lo tendremos como cadena.
Lo peor de esto es que si almacenamos un objeto, va a devolver la cadena literal [object Object]
en lugar del objeto, hay que tener cuidado.
Más información sobre los lenguajes fuertemente y débilmente tipados aquí.
Qué malo eres, localStorage, ¿cómo es que no soportas más que cadenas? bueno, antes de comenzar a reclamar hay que recordar la existencia de JSON y la serialización de datos.
Ya que localStorage
almacena cadenas, pues hay que pasarle un JSON en caso de que vayamos a guardar un objeto complejo. Si queremos números, siempre podemos cambiarlos de dato con parseInt
o parseFloat
En resumen, si quieres almacenar objetos (cosa que es totalmente posible y común) codifícalos con JSON, y al recuperarlos decodifícalos.
No te voy a enseñar cómo trabajar con JSON porque ya he escrito un post sobre eso, el cual te recomiendo leer, pero en resumen usa JSON.stringify
y JSON.parse
.
Para insertar o añadir un elemento con localStorage existen dos maneras. La primera es declarar una propiedad del objeto localStorage y la segunda es llamar a setItem
.
Vamos a centrarnos en la segunda, pues es más explícita. La sintaxis es:
localStorage.setItem("Clave", "Valor");
Así de simple es. Abajo muestro un ejemplo con varios tipos de datos, incluyendo a JSON.
No pasa nada, se actualiza el objeto.
Para actualizar los datos en localStorage, hay que llamar a setItem
de nuevo y pasarle el dato completo que se va a almacenar.
Esto no funciona como los update de SQL en donde solamente actualizamos lo necesario, aquí tienes que pasar el dato completo y actualizado.
Para saber si un valor ya existe con determinada clave, podemos usar hasOwnProperty
o un simple if accediendo al valor.
Cabe mencionar que es más recomendable usar hasOwnProperty
, ya que JavaScript evalúa las cadenas vacías y el número 0 como false
.
Para eliminar un dato de localStorage utiliza removeItem()
y pásale la clave. La sintaxis es:
localStorage.removeItem("clave");
Si quieres recuperar un valor que guardaste anteriormente, llama a getItem
pasándole la clave. Así:
let valorGuardado = localStorage.getItem("clave");
Recuerda que lo va a devolver como cadena y que debes convertirlo a determinado tipo si lo quieres usar. En el siguiente ejemplo muestro cómo recuperar y castear los objetos:
En el ejemplo estamos convirtiendo las cadenas a sus valores “reales” con todo y tipo de dato. Al imprimir los datos, se imprimen como son, no como cadenas:
Ah, por cierto, para obtener un valor también podemos obtener la propiedad de localStorage
. Por ejemplo, para obtener la edad usamos:
let edad = localStorage.edad;
En este caso no lo hacemos así porque no seríamos explícitos; desaconsejo usar esa manera.
Para obtener todos los registros que hemos guardado, sin saber la clave de los mismos, simplemente debemos acceder a todas las claves de localStorage
.
Eso se logra gracias al fabuloso método llamado Object.keys recientemente introducido (no tiene nada que ver con localStorage
, son cosas distintas) el cual devuelve un arreglo que tiene todas las claves, más tarde podemos iterarlo e ir obteniendo ese valor.
Veamos el ejemplo:
Usamos un forEach
que podría ser remplazado por un ciclo for normal. Lo importante es que usamos getItem
para obtener el valor, y gracias a ello podemos obtener todos los elementos guardados.
En este ejemplo guardamos valores nativos y simples, pero pensándolo bien y creando una bonita estructura podemos crear grandiosas cosas y sistemas complejos; eso sí, recuerda que estos datos se quedan en el navegador y que aunque el límite es grande, existe.
Por otro lado, si el usuario desinstala el navegador u obliga a que se borren los datos, nada podrás hacer. Justamente por eso es que se prefiere el uso de la arquitectura cliente-servidor.
La impresión de un PDF en cualquier impresora se puede automatizar con un bot de…
Hoy te enseñaré cómo enviar un mensaje a un usuario desde un bot de Telegram…
El día de hoy te enseñaré algo muy sencillo pero útil al programar con PHP:…
El plugin para imprimir en impresoras térmicas alcanza hoy su versión 3.4.0 agregando soporte para…
En ocasiones es necesario leer los pixeles y colores de una imagen con JavaScript del…
Siguiendo con los tutoriales de listas desplegables o select con JavaScript, vamos a ver cómo…
Esta web usa cookies.
Ver comentarios