Índice

1. Qué es Local Storage?
2. Características de Local Storage
3. Almacenar valores en Local Storage
4. JSON.stringify() para convertir arreglos y objetos a strings
5. Obtener valores de Local Storage
6. JSON.parse() para convertir strings a arreglos u objetos
7. Eliminar valores de Local Storage
8. Conclusiones
9. Referencias

1. ¿Qué es Local Storage?

Local Storage es una API del navegador que permite la persistencia de datos en memoria. Dichos datos se almacenan en el propio browser web y pueden ser accedidos a los mismos aun si cerramos el navegador o apagamos el computador.

2. Características de Local Storage

• No soporta tipos de datos numéricos, ni arreglos, ni objetos.
• Solo podemos almacenar cadenas de texto.
• localStorage.setItem() guarda los datos.
• localStorage.getItem() obtiene los datos.

3. Almacenar valores en Local Storage

Para poder guardar datos en el Local Storage del navegador usamos el método setItem() del objeto localStorage. Por ejemplo:

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

Almacena una propiedad nombre con el valor de Cristian.

4. JSON.stringify() para convertir arreglos y objetos a strings

Para poder almacenar arreglos y objetos en el storage es posible usar JSON.stringify(), esto convertirá un arreglo u objeto en string. Por ejemplo:

const persona = {
  id:1,
  nombre:'Cris'
}

localStorage.setItem('persona', JSON.stringify(persona));

Almacena el objeto persona convirtiéndolo a string con JSON.stringify().

5. Obtener valores de Local Storage

Para obtener valores del Local Storage usamos el método getItem() del objeto localStorage. Por ejemplo:

console.log(localStorage.getItem('persona'))
// "{ id:1, nombre:Cris }" es un string

Obtiene el objeto persona en formato string.
Si intentamos obtener un valor que no existe, el navegador regresará un null.

6. JSON.parse() para convertir strings a arreglos u objetos

Para convertir arreglos u objetos en formato string se usa el método JSON.parse(), por ejemplo:

console.log(JSON.parse(localStorage.getItem('persona')))
// { id:1, nombre:Cris } es un objeto

7. Eliminar valores de Local Storage

Se usa el método removeItem() y recibe el key del elemento que deseas eliminar, por ejemplo:

localStorage.removeItem('persona')

Elimina el objeto persona

Tambíen se puede limpiar TODO el storage usando:

localStorage.clear();

8. Conclusiones

• Es un API de los navegadores web modernos que permiten la persistencia de datos.
• Solo podemos almacenar cadenas de texto.
• localStorage.setItem() guarda los datos.
• localStorage.getItem() obtiene los datos.
• Si tratamos de obtener un dato que no existe el navegador regresa null.
• JSON.stringify() convierte un tipo de dato a string
• JSON.parse() opuesto al anterior.
• No existe un método de local storage que permite actualizar los datos, pero es posible hacer esto usando todos los métodos que vimos en este post

9. Referencias

• https://www.udemy.com/course/javascript-moderno-guia-definitiva-construye-10-proyectos/learn/lecture/21852728#content

Quizá pueda ser de tu interés algunos de los siguientes posts escritos por mi, dales un ojo, es gratis!

El mejor curso gratuito de Node y Express de 2021

Cristian Fernando ・ Jul 15 '21

#node #backend #javascript #spanish

NPM Cheat Sheet

Cristian Fernando ・ Jun 29 '21

#node #npm #javascript #spanish

10 preguntas y respuestas frecuentes al momento de aprender Node.js

Cristian Fernando ・ Jul 8 '21

#node #javascript #spanish #backend