15-04-2021
LocalStorage y sessionStorage son propiedades de HTML5 (web storage), que permiten almacenar datos en nuestro navegador
Guarda información que permanecerá almacenada por tiempo indefinido; sin importar que el navegador se cierre.
Almacena los datos de una sesión y éstos se eliminan cuando el navegador se cierra.
Veamos como usar el LocalStorage en JavaScript.
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 |
} |
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.
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.
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.
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.
Para eliminar un elemento del localStorage haremos:
localStorage.removeItem( "titulo" ); |
Para eliminar todas las variables guardadas en el localStorage haremos:
localStorage.clear();
© OscarAguado . Todos los derechos reservados.