Local Storage API en JavaScript 🍂

Í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

---