LocalStorage y sessionStorage son propiedades de HTML5 (web storage), que permiten almacenar datos en nuestro navegador web. De manera muy similar a como lo hacen las cookies.
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.
¡Vamos a los ejemplos!
Este ejercicio es un ejemplo de cómo funciona este tipo de almacenamiento.
Primero ingresamos los datos y los guardamos. Después, cerraremos y abriremos nuevamente la pestaña o ventana nuestro navegador, daremos clic en “cargar elementos” y nos daremos cuenta de que los datos que almacenamos inicialmente siguen ahí, gracias a la propiedad de LocalStorage.
<html><head><title>Ejemplo LocalStorage</title><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><script>/*Funcion de Capturar, Almacenar datos y Limpiar campos*/
$(document).ready(function(){
$('#boton-guardar').click(function(){
/*Captura de datos escrito en los inputs*/var nom = document.getElementById("nombretxt").value;
var apel = document.getElementById("apellidotxt").value;
/*Guardando los datos en el LocalStorage*/
localStorage.setItem("Nombre", nom);
localStorage.setItem("Apellido", apel);
/*Limpiando los campos o inputs*/document.getElementById("nombretxt").value = "";
document.getElementById("apellidotxt").value = "";
});
});
/*Funcion Cargar y Mostrar datos*/
$(document).ready(function(){
$('#boton-cargar').click(function(){
/*Obtener datos almacenados*/var nombre = localStorage.getItem("Nombre");
var apellido = localStorage.getItem("Apellido");
/*Mostrar datos almacenados*/document.getElementById("nombre").innerHTML = nombre;
document.getElementById("apellido").innerHTML = apellido;
});
});
</script></head><center><h1>Ejemplo - localStorage</h1><inputtype="text"placeholder="Nombre"id="nombretxt"><br><br><inputtype="text"placeholder="Apellido"id="apellidotxt"><br><br><buttonid="boton-guardar">Guardar</button><br><hr />
Nombre almacenado:
<labeltype="text"id="nombre"></label><br>
Apellido almacenado:
<label "text" id="apellido"></label><br><buttonid="boton-cargar">
Cargar elementos
</button></center><hr /></body></html>En este ejemplo los datos se almacenan en una sesión. De esta forma, cuando la pestaña o ventana del navegador se cierra, los datos se eliminan de forma permanente y no podrán cargarse nuevamente. Este método es usado para realizar aplicaciones más seguras y eliminar un almacenamiento innecesario de datos.
<html><head><title>Ejemplo sessionStorage</title><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><script>/*Funcion de Capturar, Almacenar datos y Limpiar campos*/
$(document).ready(function(){
$('#boton-guardar').click(function(){
/*Captura de datos escrito en los inputs*/var nom = document.getElementById("nombretxt").value;
var apel = document.getElementById("apellidotxt").value;
/*Guardando los datos en el LocalStorage*/
sessionStorage.setItem("Nombre", nom);
sessionStorage.setItem("Apellido", apel);
/*Limpiando los campos o inputs*/document.getElementById("nombretxt").value = "";
document.getElementById("apellidotxt").value = "";
});
});
/*Funcion Cargar y Mostrar datos*/
$(document).ready(function(){
$('#boton-cargar').click(function(){
/*Obtener datos almacenados*/var nombre = sessionStorage.getItem("Nombre");
var apellido = sessionStorage.getItem("Apellido");
/*Mostrar datos almacenados*/document.getElementById("nombre").innerHTML = nombre;
document.getElementById("apellido").innerHTML = apellido;
});
});
</script></head><center><h1>Ejemplo - sessionStorage</h1><inputtype="text"placeholder="Nombre"id="nombretxt"><br><br><inputtype="text"placeholder="Apellido"id="apellidotxt"><br><br><buttonid="boton-guardar">Guardar</button><br><hr />
Nombre almacenado:
<labeltype="text"id="nombre"></label><br>
Apellido almacenado:
<label "text" id="apellido"></label><br><buttonid="boton-cargar">
Cargar elementos
</button></center><hr /></body></html>Si quieres aprender más de Local Storage, sessionStorage y otras propiedades de HTML5, no te puedes perder el Curso de fundamentos de Javascript Regístrate hoy.
Hola Carlos.
¿Existe alguna manera de acceder a los datos que fueron almacenados usando Local Storage o sessionStorage desde una aplicación windows? Me explico: tengo una pagina que guarda datos en localStorage y quiero desde un un ejecutable (aplicacion.exe) acceder a esos datos, todo esto en la pc cliente donde el navegador accedió a mi página.
Gracias.
Hola, gracias por la guia, estoy usando LocalStorage para validar que no haya mas de una pestaña abierta con el siguiente codigo:
el problema es que se mantiene el localstorage cuando se “crashea” o muere el proceso del nabvegador y al volver a ingresar a la pagina, valida contra este localstorage que no se encuentra vacio y me alerta y redirige a la pantalla de fin sesión.
Sabes como evitar que al abrir recien el navegador se limpie el localstorage y se mantenga mientras no se “crashee” ? Gracias de antemano.
Buenos dias!
Me gusta mucho aprender soy novato y esta funcion es la que necesito pero no se nada de javascript y quisiera que cuando lo guarde aparezca el texto automaticamente.
Gracias
Hola, en Platzi, puedes encontrar muy buenos cursos de Javascript que te llevara de novato a avanzado.
Buenos dias!
Ya lo probe y quiero hacerlo para un listado dinamicamente con php.
una luz ayuda a caminar al horizonte.
gracias
Muy fina la explicación…