Local Storage

LocalStorage pertenece a la ventana global, window. Es un almacenamiento permanente en cache del explorador local del usuario. Se puede escribir window.localStorage. o simplemente localStorage.

Solo almacena texto

Solo se pueden introducir caracteres en esta base de datos. Si se introducen números, estos estarán en Local Storage como caracteres de texto. Ni siquiera creo que se le evalúe como datos tipo string. No son eso, son solo caracteres alfanuméricos.

Session Storage

A su vez existe sessionStorage para almacenamiento solo mientras dure la sesión del usuario.

Datos almacenados en Local Storage

Vista tomada desde Chrome

Datos almacenados en Session Storage

Igualmente tomado desde Chrome

Método .setItem() para introducir datos

Los datos se introducen por medio del método .setItem(). Se introduce una llave y su respectivo valor. La sintaxis es la siguiente:

localStorage.setItem(‘key’, ‘value’);

Ambos entre comillas por que lo que se está introduciendo son valores tipo string. Lo siguiente almacenará el texto «nombre» como key y el texto «Juancho» como valor de esa key.

localStorage.setItem('nombre', 'Juancho');

Método JSON.stringify() para convertir a string

Con este método podemos pasar datos tipo objetos o arreglos a cadenas de caracteres tipo JSON.

const producto = {
    nombre: 'Monitor 24"',
    precio: 300
}
const productoString = JSON.stringify(producto);
localStorage.setItem('productoJSON', productoString);

const meses = ['Enero', 'Febrero', 'Marzo'];
localStorage.setItem('meses',  JSON.stringify(meses));

El método .getItem()

Con getItem podemos traer los datos de regreso desde el Local Storage. Pero estos van a regresar como string.

El método JSON.parse()

Con este método podemos traer los datos desde Local Storage y convertirlos de nuevo a un objeto o a un arreglo siempre y cuando tengan el formato correcto.

const productoJSON = localStorage.getItem('productoJSON');
console.log(productoJSON);
console.log(typeof(productoJSON));
console.log(JSON.parse( productoJSON ));


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

El método .removeItem()

Para eliminar datos en el Local Storage.

localStorage.removeItem('nombre');
localStorage.removeItem('productoJSON');

Para editar los datos en el Local Storage

No hay un método para editar datos en Local Storage. En tal caso hay que traerlos, editarlos y volverlos a guardar en el Local Storage. Si se guarda bajo el mismo nombre de llave entonces el valor se sobre escribirá.

const mesesArray = JSON.parse(localStorage.getItem('meses'));
console.log(mesesArray)
mesesArray.push('ABRIL');
console.log(mesesArray);
localStorage.setItem('meses', JSON.stringify(mesesArray))
Fe de errata: el primer console.log debió mostrar el arreglo sin el mes de abril, pero el código es correcto. Cuando tomé la captura de la pantalla ya el arreglo se había guardado con ese nuevo dato.

El método .clear

Para borrar todo lo que está en el Local Storage.

localStorage.clear();