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>
<input type="text" placeholder="Nombre" id="nombretxt"><br><br>
<input type="text" placeholder="Apellido" id="apellidotxt"><br><br>
<button id="boton-guardar">Guardar</button><br>
<hr />
Nombre almacenado:
<label type="text" id="nombre"></label><br>
Apellido almacenado:
<label "text" id="apellido"></label><br>
<button id="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>
<input type="text" placeholder="Nombre" id="nombretxt"><br><br>
<input type="text" placeholder="Apellido" id="apellidotxt"><br><br>
<button id="boton-guardar">Guardar</button><br>
<hr />
Nombre almacenado:
<label type="text" id="nombre"></label><br>
Apellido almacenado:
<label "text" id="apellido"></label><br>
<button id="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, me gustaria comentarte que localStorage y sessionStorage no se explican en el curso, desafortunadamente
wow muchas gracias por la información
Porque no funciona en Chrome??
Es lo que necesitaba, agarre un trabajo freelancer en heiwork y me pidieron que haga esto, gracias, voy a ponerlo en practica
Hola!
Tengo una duda.
¿Este método permite que un botón de traducción (Que está en todas las páginas de mi proyecto) al presionarse se mantenga en todas las páginas?
Resulta que al cambiarme de página tengo que volverla a traducir y yo deseo que al darle una vez permanezca así hasta quererlo cambiar de nuevo.
Esto me acaba de servir como no tienen idea! Gracias!