Con el HTML clásico si necesitamos almacenar datos en el cliente (navegador) se utilizan las cookies. Con HTML5 se han agregado otras tecnologías para almacenar datos en el cliente.
La primer tecnología que vamos a ver para almacenar datos en el navegador empleando HTML5 es la funcionalidad que provee el objeto localStorage.
El objeto localStorage nos permite almacenar datos que serán recordados por el navegador para siempre, es decir no tienen una fecha de caducidad.
La cantidad de información que podemos almacenar es muy superior a la permitida con las cookies, el localStorage permite almacenar por lo menos 5 Mb.
La información que se almacena en el localStorage a diferencia de las cookies no se envía al servidor cada vez que se solicita una página. Necesariamente debemos utilizar Javascript para almacenar y recuperar datos.
El objeto localStorage cuenta con dos métodos fundamentales para grabar y recuperar datos:
localStorage.setItem ( [clave] , [valor]) localStorage.getItem ( [clave] )
El método setItem permite almacenar los datos que le enviamos en el segundo parámetro y los guarda con la clave indicada en el primer parámetro.
Para recuperar datos del localStorage debemos llamar al método getItem pasando como parámetro la clave de referencia. La clave sería como el primary key en el modelo de base de datos relacionales.
Desarrollaremos una aplicación que nos muestre la potencia que disponemos ahora en todo navegador moderno.
Confeccionar una aplicación que permita administrar un diccionario ingles/castellano, almacenar en forma local dichos datos.
<!DOCTYPE HTML>
<html>
<head>
<title>Título de la página</title>
<meta charset="UTF-8">
<script>
window.addEventListener('load', inicio, false);
function inicio() {
document.getElementById('guardar').addEventListener('click', guardar, false);
document.getElementById('traducir').addEventListener('click', recuperar, false);
}
function guardar(evt) {
localStorage.setItem(document.getElementById('ingles').value, document.getElementById('castellano').value);
document.getElementById('ingles').value='';
document.getElementById('castellano').value='';
}
function recuperar(evt) {
if (localStorage.getItem(document.getElementById('ingles').value) == null)
alert('No está almacenala la palabra '+document.getElementById('ingles').value);
else
document.getElementById('castellano').value=localStorage.getItem(document.getElementById('ingles').value);
}
</script>
</head>
<body>
Palabra en ingles:
<input type="text" id="ingles">
<input type="button" id="traducir" value="Traducir">
<br>
Palabra en castellano:
<input type="text" id="castellano">
<br>
<input type="button" id="guardar" value="Guardar">
</body>
</html>
Hemos implementado dos controles input para la carga de datos por parte del operador y dos botones para procesar la grabación de datos en el localStorage y la búsqueda.
Los primero que hacemos en Javascript es indicar que el método inicio se ejecute una vez que la página este cargada:
window.addEventListener('load', inicio, false);
En la función inicio asociamos la función que se ejecutará al presionarse cada botón:
function inicio() {
document.getElementById('guardar').addEventListener('click', guardar, false);
document.getElementById('traducir').addEventListener('click', recuperar, false);
}
El método guardar se ejecuta cuando presionamos el botón "Guardar", en este llamamos al método setItem del objeto localStorage pasando como clave la palabra en ingles y como dato a grabar la palabra en castellano ( por ejemplo si guardamos la traducción de casa luego como clave se almacena 'house' y como dato 'casa'):
function guardar(evt) {
localStorage.setItem(document.getElementById('ingles').value, document.getElementById('castellano').value);
document.getElementById('ingles').value='';
document.getElementById('castellano').value='';
}
El proceso inverso, es decir la recuperación de datos del localStorage la realizamos en el la función 'recuperar', llamamos al método getItem pasando como parámetro la palabra en ingles que buscamos para que nos retorne su traducción. Agregamos un if para los casos que no exista la palabra dentro del diccionario:
function recuperar(evt) {
if (localStorage.getItem(document.getElementById('ingles').value) == null)
alert('No está almacenala la palabra '+document.getElementById('ingles').value);
else
document.getElementById('castellano').value=localStorage.getItem(document.getElementById('ingles').value);
}
Como podemos analizar con un programa de 15 líneas podemos automatizar el almacenamiento y recuperación de datos del diccionario.
Hemos visto como funciona el objeto localStorage para el almacenamiento permanente de datos. El otro objeto llamado sessionStorage cuenta con los mismos métodos pero la diferencia fundamental es que los datos almacenados solo permanecen mientras no cerremos la sesión del navegador, una vez que cerramos el navegador se pierden todos los datos almacenados utilizando el objeto sessionStorage.
Dependiendo de la necesidad utilizamos el localStorage o el sessionStorage.