Última actualización: 6 abril, 2023
¿Qué es el local storage?
Cuando construimos una app, normalmente trabajamos con algún tipo de información, por ejemplo, si le pedimos a un usuario que introduzca una ciudad para ver qué tiempo hace allí. Pero si no almacenamos esa información en algún sitio, ésta se perderá cuando recarguemos la página.
Existen dos maneras de solucionar esto:
Utilizando local storage, la información queda almacenada en el navegador del usuario. Esa información, al igual que en una base de datos, podremos rescatarla y manipularla como queramos.
Jerga en inglés sobre el tema:
almacenar datos = store data
obtener datos = retrieve data
La local storage API nos la proporciona el navegador directamente, así que podemos acceder a esa a través del window object. Si vamos a la consola y escribimos window, verás que una de las propiedades es localStorage. Dentro de ella verás que hay una propiedad llamada length, que debería estar a cero ahora mismo porque no tenemos nada guardado en local storage aún.
La propiedad length representa el número de cosas (items) que tenemos almacenados en localStorage actualmente. Luego haremos ese número crecer . Si abrimos la opción __proto__, tenemos diferentes métodos asociados al localStorage que podemos usar para interactuar con la información, añadir y eliminar items, etc.
Hemos dicho entonces que en localStorage almacenamos datos. Cada dato será un item que tendrá una key y un value, muy parecido a la estructura de un objeto en JavaScript (JS). Con la particularidad de que un item debe ser siempre un string. Eso no significa que no podamos crear arrays, objetos, o cualquier otro data type. Simplemente significa que cualquier data type debe ir entre comillas como un string para poder ser almacenado en local storage.
Posteriormente podremos coger ese string y convertirlo al data type que necesitemos, usando los métodos proporcionados por la local storage API. Esta conversión es parecida a lo que debemos hacer para convertir datos en formato JSON.
Vamos a ver cómo funciona local storage en la práctica . Usaremos un archivo index.html donde no necesitamos nada más que un boilerplate y conectarlo a un archivo JS al que llamaremos sandbox.js.
CONTENIDO RESTRINGIDO
El resto del contenido es sólo para miembros del Club ACTech. Puedes unirte aquí o iniciar sesión si ya eres miembro.
THE END!
¡Y con esto terminamos nuestra guía sobre local storage! Espero que hayas aprendido algo nuevo . Si te queda alguna duda, ¡nos vemos en los comentarios!
Y si crees que este post puede serle útil a alguien, ¡compártelo!
Otros artículos que pueden interesarte