Local Storage en JavaScript | Guía completa

Última actualización: 30 junio, 2022

¿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:

maneras almacenamiento datos
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 objectSi 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 lengthque 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 (itemsque 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.

window local storage

Hemos dicho entonces que en localStorage almacenamos datos. Cada dato será un item que tendrá una key y un valuemuy parecido a la estructura de un objeto en JavaScript (JS). Con la particularidad de que un item debe ser siempre un stringEso no significa que no podamos crear arrays, objetos, o cualquier otro data typeSimplemente 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

Cómo aprendí a programar cuando estaba «programada» para ser de letras
[tcb-script src="https://player.vimeo.com/api/player.js"][/tcb-script]A nadie le gusta su trabajo. Eso es lo que me decía a mí misma cuando conseguí mi primer[...]
Guía de iniciación al data binding en Angular
¿Qué es el databinding?El databinding es la forma que tiene Angular para permitirnos mostrar contenido dinámico en lugar de estático (en inglés, hardcoded). Podríamos[...]
Claves para entender Angular – Qué es y cómo se utiliza
Angular es un framework creado por Google que nos permite construir Single Page Applications (SPA, por sus siglas en inglés).Frameworks¿Pero qué es[...]
Si crees que este post puede serle útil a alguien, por favor, ¡compártelo!:

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Esta web utiliza cookies para asegurar que se da la mejor experiencia al usuario. Si continúas utilizando este sitio se asume que estás de acuerdo. más información

Los ajustes de cookies en esta web están configurados para «permitir las cookies» y ofrecerte la mejor experiencia de navegación posible. Si sigues usando esta web sin cambiar tus ajustes de cookies o haces clic en «Aceptar», estarás dando tu consentimiento a esto.

Cerrar