Ú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.
[membership level="0, -1"]
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.
[/membership]
[membership]
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 setItem. Sintaxis:
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".
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 y 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 string. Para 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. 
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! 
[/membership]
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
[VÍDEO] Claves para convertirte en Frontend Developer
Si te gustaría convertirte en Desarrollador/a Frontend sin tener que dejar tu trabajo mientras estudias y sin que te cueste un riñón, he preparado un vídeo para ti.