Introducción

localStorage es una propiedad de la interfaz window que nos da acceso al objeto Storage local, nos permite agregar,modificar,o eliminar los ítems almacenados localmente.

Al almacenar datos usando localStorage, éstos datos no expiran y, persisten a través de distintas sesiones.

La información se almacena a través de pares clave-valor y siempre estarán en formato UTF-16 (string).

¿Cómo se usa?

Al acceder a un objeto de tipo Storage, localStorage nos disponibiliza una serie de métodos para poder almacenar,modificar o eliminar los items almacenados. Los veremos a continuación:

setItem()

Recibe un par clave-valor y los añade al almacenamiento local. Si dicha clave ya existe, actualizará su valor.

const notas = [
  { id: 1, cuerpo: "Leer libro: Malestar en la cultura,Ensayo sobre la ceguera, Clean Code..." },
  { id: 2, cuerpo: "Practicar higiene del sueño: Al acercarse la hora de dormir, apagar/atenuar luces, no usar el móvil, reducir la temperatura y relajarse." },
  { id: 3, cuerpo: "Reducir fuentes de recompensa inmediatas: Móvil, juegos, masturbación etc..." }
];

const texto = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin efficitur eu justo sollicitudin tempor. "


localStorage.setItem("notas",JSON.stringify(notas));
localStorage.setItem("texto",texto);

Aqui disponemos de un array de objetos (array de objetos "notas") y una cadena de texto (variable "texto"), para almacenarlos en almacenamiento local llamamos a localStorage.setItem() que recibe un clave como primer argumento y valor como segundo.

Dado que la información debe ser almacenada en formato string, aquí usamos JSON.stringify() para convertir nuestro array notas a notación JSON y pasarlo como segundo parámetro de la función setItem().

key()

Este método recibe un número "n" de clave,y devolverá el nombre de la n-ésima clave en el almacenamiento local.

console.log(localStorage.key(0))
console.log(localStorage.key(1))

getItem()

A diferencia de key(),recibe un nombre de clave (string en vez de número) y,devuelve el valor que corresponda con dicha clave.

Si quisieramos recuperar datos que están almacenados en localStorage, debemos usar getItem(), pero recuerda que los datos están almacenados en string (en este caso, notas está en formato JSON), por lo que debemos usar JSON.parse() para convertirlo a una estructura de datos válida en JavaScript.

const arrayNotas = JSON.parse(localStorage.getItem("notas"));

console.log(arrayNotas);

Al convertirlo en un array JavaScript, podemos almacenarlo a una variable.

En caso de que no hicieramos la conversión, se nos devolvería un string en formato JSON del array almacenado, por lo que no podríamos acceder a los índices de dicho array, ni a sus respectivas propiedades en caso de que sean objetos, por lo que es importante tener esto en mente.

removeItem()

Recibe como argumento el nombre (string) de la clave que se desea eliminar del almacenamiento local.

localStorage.removeItem("texto");

¿Cuándo utilizarlo?

Con sessionStorage los datos se guardan solo hasta que se cierra la ventana o pestaña. Con localStorage , los datos se retienen hasta que el usuario borra la caché del navegador manualmente o hasta que la aplicación web borra los datos. Por lo que cada vez que queramos que los datos persistan, podemos usar localStorage.