DEV Community

Cristian Fernando
Cristian Fernando

Posted on • Updated on

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');


Enter fullscreen mode Exit fullscreen mode

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));


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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


Enter fullscreen mode Exit fullscreen mode

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')


Enter fullscreen mode Exit fullscreen mode

Elimina el objeto persona

Tambíen se puede limpiar TODO el storage usando:



localStorage.clear();


Enter fullscreen mode Exit fullscreen mode

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


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


gif

Top comments (0)