portada local storage guía

Local Storage en JavaScript | Guía completa

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

Cómo almacenar y obtener datos

Hemos mencionado que local storage es parte del window object. Eso significa que podemos acceder a él tanto escribiendo window en la consola y buscando la propiedad localStorage, como escribiendo directamente localStorage en la consola: 

localStorage
 > Storage {length: 0} 

1. Para almacenar datos en local storage, usamos el método setItemSintaxis:

localStorage.setItem('key name', 'value name');

Como key name le damos por ejemplo, fullName y como value name, Paquita Salas. Hacemos lo mismo pero con la edad.

localStorage.setItem('fullName', 'Paquita Salas');
localStorage.setItem('age', 50);

Si ahora volvemos a la consola y escribimos localStorage, notarás que nuestros datos se han añadido y ya están guardados en local storage, así de sencillo. 😮

localStorage
 > Storage {familyName: "Paquita Salas", age: "50", length: 2}

🧐 Fíjate que, aunque hemos escrito la edad en formato número, local storage lo ha convertido a un string. Ese es su comportamiento habitual. También tenemos acceso directo a esa información desde la pestaña "application".

acceso local storage desde application

2. Para obtener (retrieve) datos almacenados en local storage, utilizamos el método llamado getItem y le pasamos como argumento el key name del item que queremos obtener. Lo guardamos en una variable. Si ahora hacemos un console.log de esa variable, deberíamos ver el resultado en la consola. 

let name = localStorage.getItem('fullName');
let age = localStorage.getItem('age');

console.log(name, age); // Paquita Salas 50

Así de sencillo 😁. Puedes probar a cerrar la web y volver a cargarla. Verás que los datos siguen ahí. De hecho, aunque ahora comentes el código donde creamos los items (con el método setItem), verás que los items siguen guardados en el navegador.

3. También podemos actualizar información. Por ejemplo, queremos darle unos nuevos valores a fullName age. Para eso, simplemente usamos el método setItem de nuevo y sobrescribimos los valores.

localStorage.setItem('fullName', 'Paquita Salas');
localStorage.setItem('age', 50);

let name = localStorage.getItem('fullName');
let age = localStorage.getItem('age');

console.log(name, age); // Paquita Salas 50

localStorage.setItem('fullName', 'Mawi');

console.log(name); // Paquita Salas

Ojo porque el valor ya ha cambiado, pero aún no lo hemos obtenido 🤨. Por eso el último console.log nos sigue dando los datos del fullName con su valor anterior. Así que para obtener el nuevo valor, seguimos el paso 2 de arriba.

name = localStorage.getItem('fullName');
console.log(name); // Mawi

Y ahora sí que sí. Aunque esta no es la única manera de hacerlo, porque también podríamos utilizar dot notation

localStorage.age = 35;

name = localStorage.getItem('fullName');
age = localStorage.getItem('age');
console.log(name, age); // Mawi 35

Cómo borrar datos

Existen dos posibilidades: borrar un solo item de local storage o borrarlos todos

1. Para borrar un solo item, usamos el método remove y le pasamos por parámetro el key name del item que queremos borrar. Si ahora intentamos obtener ese item, la consola nos dirá que no existe. 

localStorage.removeItem('fullName');
name = localStorage.getItem('fullName')
console.log(name); // null

También verás que ha desparecido de la pestaña "application". 

2. Si lo que queremos es borrar todos los datos que tenemos en local storage, usamos el método clear().

// localStorage.removeItem('fullName');
// name = localStorage.getItem('fullName')
// console.log(name); // null

localStorage.clear()
name = localStorage.getItem('fullName');
age = localStorage.getItem('age');
console.log(name, age); // null null

Cómo convertir datos a formato JSON / desde formato JSON

Hasta ahora hemos trabajado con datos sencillos, como strings y números. Es momento de trabajar con estructuras más complejas, como arrays u objetos 💪. Recuerda que los datos que guardamos en local storage deben de tener el formato de string. Así que, guardemos lo que guardemos, la local storage API lo convertirá en un string, como ha sucedido cuando hemos hecho

localStorage.setItem('age', 50);

convirtiendo el número 50 en el string "50". Pasemos a la acción para ver cómo funciona esto realmente 👩‍💻. Es un proceso muy similar a trabajar con JSON data.

1. Creamos un array de objetos y lo guardamos en una variable llamada toDos. Puedes comentar todo el código anterior para que no te moleste.

const toDos = [
    { task: "play dungeons & dragons", author: "Will" },
    { task: "escape from Demogorgon", author: "Will" },
    { task: "go to the arcade", author: "Will" }
];

2. Para guardar esta estructura compleja en local storage, primero debemos convertir esos datos a un JSON stringPara eso, usamos un método del JSON object llamado stringify y le pasamos la variable como argumento. Hacemos un console.log del resultado.

console.log(JSON.stringify(toDos));

Lo que resulta en un string gigante. Pero no sólo eso, sino que JS lo ha convertido a un JSON string, porque ahora tanto las keys como los values  de los objetos van entre comillas dobles.

[{"task":"play dungeons & dragons","author":"Will"},{"task":"escape from Demogorgon","author":"Will"},{"task":"go to the arcade","author":"Will"}]

Este es, por tanto, el formato correcto en el que debemos guardar datos en local storage. 👩‍🏫

3. Ya podemos comentar ese console.log y utilizar lo aprendido para crear un item con el método setItem.

// console.log(JSON.stringify(toDos));

localStorage.setItem('toDosList', JSON.stringify(toDos));

Y con esto, si vamos a las dev tools, en la pestaña application podremos ver los datos recién guardados. 👌

array application local storage

4. Los siguientes pasos serían obtener esos datos (retrieve) y convertirlos de nuevo en un array para poder manipularlo. Para ello, creamos una variable llamada storedToDos, y usamos el método getItem para obtener los datos. Esto nos seguiría dando un JSON string, así que usamos el  método parse sobre los datos.  Lo hacemos en un console.log para ver el resultado.

const storedToDos = localStorage.getItem('toDosList');
console.log(JSON.parse(storedToDos))

¡Y ahora ya podemos ver nuestro array en la consola! ✨ 👏 🌟

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

Días del 353 al 386
Objetivos versus realidad Y nuevamente, llegó otro día clave. Llegó…y pasó. El pasado 4 de marzo este Reto Computer Geek[...]
Angular: Entendiendo la Directiva ngModel
Angular es un framework que nos permite, entre otras cosas, añadir contenido dinámico a nuestros archivos HTML. Una de las formas[...]
Días del 2 al 4
"Si buscas resultados distintos no hagas siempre lo mismo" - Albert EinsteinEstos días estoy aprendiendo a hacer loops en JavaScript[...]

Deja un comentario

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

Como toda web legal que se precie, utilizamos cookies para asegurar que damos la mejor experiencia al usuario en nuestro sitio web. Si continúas utilizando este sitio asumiremos que estás de acuerdo. más información

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

Cerrar