Índice
- Qué es Local Storage?
- Características de Local Storage
- Almacenar valores en Local Storage
JSON.stringify()para convertir arreglos y objetos a strings- Obtener valores de Local Storage
JSON.parse()para convertir strings a arreglos u objetos- Eliminar valores de Local Storage
- Conclusiones
- 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
personaconvirtiéndolo a string conJSON.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
personaen formato string.
Si intentamos obtener un valor que no existe, el navegador regresará unnull.
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
Quizá pueda ser de tu interés algunos de los siguientes posts escritos por mi, dales un ojo, es gratis!
Top comments (0)