Blog
15-04-2021
LocalStorage y sessionStorage son propiedades de HTML5 (web storage), que permiten almacenar datos en nuestro navegador
Local Storage
Guarda información que permanecerá almacenada por tiempo indefinido; sin importar que el navegador se cierre.
Session Storage
Almacena los datos de una sesión y éstos se eliminan cuando el navegador se cierra.
Veamos como usar el LocalStorage en JavaScript.
Comprobar si el navegador es compatible
Podemos ver si el navegador web tiene disponible la funcionalidad del localstorage así:
if (typeof(Storage) !== "undefined") { |
// LocalStorage disponible |
} else { |
// LocalStorage no soportado en este navegador |
} |
Guardar datos en el navegador
Para almacenar datos y guardar nuevos elementos o indices en el LocalStorage usaremos la siguiente instrucción:
// Guardar |
localStorage.setItem("titulo", "Almacenar texto u objetos de JS"); |
De esta manera damos de alta un nuevo elemento en el almacenamiento del browser.
Recuperar datos
Para conseguir los datos que tenemos guardados en un indice de nuestro almacenamiento local del navegador usaremos:
// Conseguir elemento |
localStorage.getItem("titulo"); |
Esto nos devolverá el valor que hemos guardado anteriormente.
Guardar objetos en el LocalStorage
Para guardar un objeto primero debemos convertirlo en un string json ya que el localstorage no permite guardar objetos de JavaSciprt como tal.
Tendríamos que hacer algo así:
localStorage.setItem("usuario", JSON.stringify(mi_objeto)); |
Guardamos el elemento usuario cuyo valor es un objeto convertido a string.
Sacar objetos del LocalStorage
Para recuperar un objeto primero debemos convertirlo en un objeto de JavaScript json en lugar del string json que hay guardado por defecto.
Haríamos esto:
JSON.parse(localStorage.getItem("usuario")); |
Recordemos que:
JSON.parse() es para parsear o convertir algo a un objeto JSON usable por JavaScript.
JSON.stringify() es para crear un JSON string de un objeto o un array.
Borrar o vaciar el localStorage
Para eliminar un elemento del localStorage haremos:
localStorage.removeItem("titulo"); |
Para eliminar todas las variables guardadas en el localStorage haremos:
localStorage.clear();