Cmo usar LocalStorage
con JavaScript y HTML5
29
inCompartir
Carlos Eduardo Reina Cardenasoctubre 5 2015
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.
LocalStorage: Guarda informacin que permanecer almacenada por
tiempo indefinido; sin importar que el navegador se cierre.
sessionStorage: Almacena los datos de una sesin y stos se eliminan
cuando el navegador se cierra.
Las caractersticas de Local Storage y sessionStorage son:
Permiten almacenar entre 5MB y 10MB de informacin; incluyendo texto
y multimedia
La informacin est almacenada en la computadora del cliente y NO es
enviada en cada peticin del servidor, a diferencia de las cookies
Utilizan un nmero mnimo de peticiones al servidor para reducir el
trfico de la red
Previenen prdidas de informacin cuando se desconecta de la red
La informacin es guardada por domino web (incluye todas las pginas
del dominio)
Vamos a los ejemplos!
LocalStorage
El siguiente ejercicio es un ejemplo de cmo funciona este tipo de
almacenamiento. Primero debemos iniciar el DEMO, para ingresar los datos
que deseamos y guardarlos. Despus, cerraremos y abriremos nuevamente la
pestaa 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.
[javascript]
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo LocalStorage</title>
<script src="[Link]
</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 = [Link]("nombretxt").value;
var apel = [Link]("apellidotxt").value;
/*Guardando los datos en el LocalStorage*/
[Link]("Nombre", nom);
[Link]("Apellido", apel);
/*Limpiando los campos o inputs*/
[Link]("nombretxt").value = "";
[Link]("apellidotxt").value = "";
});
});
/*Funcion Cargar y Mostrar datos*/
$(document).ready(function(){
$(#boton-cargar).click(function(){
/*Obtener datos almacenados*/
var nombre = [Link]("Nombre");
var apellido = [Link]("Apellido");
/*Mostrar datos almacenados*/
[Link]("nombre").innerHTML = nombre;
[Link]("apellido").innerHTML = apellido;
});
});
</script>
</head>
<center>
<h1>Ejemplo localStorage</h1>
<input type="text" placeholder="Nombre" id="nombretxt">
<input type="text" placeholder="Apellido" id="apellidotxt">
<button id="boton-guardar">Guardar</button>
<hr />
Nombre almacenado:
<label type="text" id="nombre"></label>
Apellido almacenado:
<label "text" id="apellido"></label>
<button id="boton-cargar">
Cargar elementos
</button>
</center>
<hr />
</body>
</html>
[/javascript]
sessionStorage
En este ejemplo, los datos se almacenan en una sesin. De esta forma, cuando
la pestaa o ventana del navegador se cierra, los datos se eliminan de forma
permanente y no podrn cargarse nuevamente.
Este mtodo es usado para realizar aplicaciones ms seguras y eliminar un
almacenamiento innecesario de datos.
[javascript]
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo sessionStorage</title>
<script src="[Link]
</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 = [Link]("nombretxt").value;
var apel = [Link]("apellidotxt").value;
/*Guardando los datos en el LocalStorage*/
[Link]("Nombre", nom);
[Link]("Apellido", apel);
/*Limpiando los campos o inputs*/
[Link]("nombretxt").value = "";
[Link]("apellidotxt").value = "";
});
});
/*Funcion Cargar y Mostrar datos*/
$(document).ready(function(){
$(#boton-cargar).click(function(){
/*Obtener datos almacenados*/
var nombre = [Link]("Nombre");
var apellido = [Link]("Apellido");
/*Mostrar datos almacenados*/
[Link]("nombre").innerHTML = nombre;
[Link]("apellido").innerHTML = apellido;
});
});
</script>
</head>
<center>
<h1>Ejemplo sessionStorage</h1>
<input type="text" placeholder="Nombre" id="nombretxt">
<input type="text" placeholder="Apellido" id="apellidotxt">
<button id="boton-guardar">Guardar</button>
<hr />
Nombre almacenado:
<label type="text" id="nombre"></label>
Apellido almacenado:
<label "text" id="apellido"></label>
<button id="boton-cargar">
Cargar elementos
</button>
</center>
<hr />
</body>
</html>
[/javascript]
DEMO
Si quieres aprender ms de Local Storage, sessionStorage y otras propiedades
de HTML5, no te puedes perder el Curso de HTML5 y CSS3 de
Platzi. Aprenders cmo disear y maquetar sitios; adems de todo
sobre Flexbox y arquitectura de informacin. Regstrate hoy.