Hasta el momento, los datos almacenados desde una página HTML solo podían tratarse en 4KB de una coockie o bien, debían tratarse en una base de datos del servidor web.
HTML5 rompe esta limitación y se apoya en navegadores más evolucionados que soportan esta funcionalidad; por tanto, se pueden implementar ya perfectamente en los sitios web que realizamos en la actualidad.
Esta soportado por las siguientes versiones o superiores de cada navegador:
El API WebStorage se divide en dos vertientes, el "SessionStorage", para guardar información que caducará al final de la sesión y el "LocalStorage", que permite almacenar datos que perduren entre distintas visitas del mismo usuario al sitio web.
Ahora un poco de teoría.
API: INTERFAZ STORAGE
Permite acceder a una serie de pares clave/valor, también llamados ítems. Está implementada por los objetos SessionStorage y LocalStorage, explicados más adelante.
Se podría pensar en el objeto como un array asociativo, es decir, un array al que se puede acceder a través de un índice de tipo string (clave) y no necesariamente una posición.
ATRIBUTOS:
length: devuelve el número de pares clave/valor que contiene el objeto. Es de sólo lectura, no es modificable.
MÉTODOS:
key(pos): devuelve la clave que se encuentra en la posición indicada en la variable "pos" que se pasa como parámetro. El parámetro puede ser un literal, es decir, un número, o bien una variable que contenga un valor numérico.
Si la posición es mayor que el número de elementos (length - 1), entonces devuelve null.
getItem(clave): obtiene el ítem del objeto que contiene como clave el valor que se le pasa como parámetro. 'clave' puede ser una cadena de caracteres o una variable de tipo string.
También se puede obtener la clave tomando el objeto como si se tratase de un array asociativo, es decir, storage['clave'] o accediendo como objeto storage.clave.
setItem(clave, valor): comprueba si la clave existe en el objeto, si no existe la inserta y en caso de existir, actualiza su valor al valor que se le pasa como segundo parámetro.
También se puede asignar una clave como si se tratase de un array asociativo, es decir, storage['clave'] = 'valor' o actualizando como objeto storage.clave = valor.
Como curiosidad, decir que los datos se guardan en orden alfabético.
removeItem(clave, valor): comprueba si la clave existe en el objeto, si no existe la inserta y en caso de existir, actualiza su valor al valor que se le pasa como segundo parámetro.
clear(): elimina todos los pares clave/valor del objeto.
SESSIONSTORAGE
Puede guardar información referente a una ventana/pestaña en la que el usuario lleva a cabo una transacción simple, pero podría llevar a cabo múltiples transacciones en diferentes ventanas/pestañas al mismo tiempo.
Para ello se utiliza el atributo sessionStorage. Cabe destacar que los datos se pierden al cerrar el navegador.
LOCALSTORAGE
Puede almacenar información útil para múltiples ventanas/pestañas, que perdura en el tiempo. No se puede compartir de navegador a navegador. Para ello se utiliza el atributo localStorage. En este caso los datos no desaparecen aun cerrando el navegador, únicamente se borrarán haciendo un borrado manual, mediante código, a través de la consola del navegador o borrándolas directamente desde la carpeta en la que se guardan en el SO.
HTML5 rompe esta limitación y se apoya en navegadores más evolucionados que soportan esta funcionalidad; por tanto, se pueden implementar ya perfectamente en los sitios web que realizamos en la actualidad.
Esta soportado por las siguientes versiones o superiores de cada navegador:
- IE 8.0+
- Firefox 3.5+
- Safari 4.0+
- Chrome 4.0+
- Opera 10.5+
- iPhone 2.0+
- Android 2.0+
El API WebStorage se divide en dos vertientes, el "SessionStorage", para guardar información que caducará al final de la sesión y el "LocalStorage", que permite almacenar datos que perduren entre distintas visitas del mismo usuario al sitio web.
Ahora un poco de teoría.
API: INTERFAZ STORAGE
Permite acceder a una serie de pares clave/valor, también llamados ítems. Está implementada por los objetos SessionStorage y LocalStorage, explicados más adelante.
Se podría pensar en el objeto como un array asociativo, es decir, un array al que se puede acceder a través de un índice de tipo string (clave) y no necesariamente una posición.
ATRIBUTOS:
length: devuelve el número de pares clave/valor que contiene el objeto. Es de sólo lectura, no es modificable.
MÉTODOS:
key(pos): devuelve la clave que se encuentra en la posición indicada en la variable "pos" que se pasa como parámetro. El parámetro puede ser un literal, es decir, un número, o bien una variable que contenga un valor numérico.
Si la posición es mayor que el número de elementos (length - 1), entonces devuelve null.
getItem(clave): obtiene el ítem del objeto que contiene como clave el valor que se le pasa como parámetro. 'clave' puede ser una cadena de caracteres o una variable de tipo string.
También se puede obtener la clave tomando el objeto como si se tratase de un array asociativo, es decir, storage['clave'] o accediendo como objeto storage.clave.
setItem(clave, valor): comprueba si la clave existe en el objeto, si no existe la inserta y en caso de existir, actualiza su valor al valor que se le pasa como segundo parámetro.
También se puede asignar una clave como si se tratase de un array asociativo, es decir, storage['clave'] = 'valor' o actualizando como objeto storage.clave = valor.
Como curiosidad, decir que los datos se guardan en orden alfabético.
removeItem(clave, valor): comprueba si la clave existe en el objeto, si no existe la inserta y en caso de existir, actualiza su valor al valor que se le pasa como segundo parámetro.
clear(): elimina todos los pares clave/valor del objeto.
SESSIONSTORAGE
Puede guardar información referente a una ventana/pestaña en la que el usuario lleva a cabo una transacción simple, pero podría llevar a cabo múltiples transacciones en diferentes ventanas/pestañas al mismo tiempo.
Para ello se utiliza el atributo sessionStorage. Cabe destacar que los datos se pierden al cerrar el navegador.
LOCALSTORAGE
Puede almacenar información útil para múltiples ventanas/pestañas, que perdura en el tiempo. No se puede compartir de navegador a navegador. Para ello se utiliza el atributo localStorage. En este caso los datos no desaparecen aun cerrando el navegador, únicamente se borrarán haciendo un borrado manual, mediante código, a través de la consola del navegador o borrándolas directamente desde la carpeta en la que se guardan en el SO.
EJEMPLO:
Creamos una página HTML5 y crearemos un ejemplo con LOCALSTORAGE :
<html lang="es">
<head>
.....
<script>
function save()
{
var vnombre = document.getElementById('nombre').value;
var vedad = document.getElementById('edad').value;
var vemail = document.getElementById('email').value;
localStorage.setItem('text_nombre', vnombre);
localStorage.setItem('text_edad', vedad);
localStorage.setItem('text_email', vemail);
}
function load()
{
if (window.localStorage) {
alert(localStorage.length);
var storedValue = localStorage.getItem('text_nombre');
if(storedValue) {
document.getElementById('nombre').value = storedValue;
}
var storedValue = localStorage.getItem('text_edad');
if(storedValue) {
document.getElementById('edad').value = storedValue;
}
var storedValue = localStorage.getItem('text_email');
if(storedValue) {
document.getElementById('email').value = storedValue;
}
} else {
alert('Actualice navegador!!!');
}
}
function remove()
{
document.getElementById('nombre').value = '';
document.getElementById('edad').value = '';
document.getElementById('email').value = '';
localStorage.removeItem('text_nombre');
localStorage.removeItem('text_edad');
localStorage.removeItem('text_email');
// tambien vale
localStorage.clear();
}
</script>
.....
</head>
<body onload="load()">
<form name="formulario">
<label for="nombre">Nombre</label><input type="text" name="nombre" id="nombre" />
<label for="edad">Edad</label><input type="text" name="edad" id="edad" />
<label for="email">Mail</label><input type="text" name="email" id="email" />
<input type='button' value='guardar' onclick="save()">
<input type='button' value='eliminar' onclick="remove()">
</form>
</body>
</html>
Es un ejemplo muy funcional y sencillo, cada vez que se recarga la página load() preguntará si el navegador soporta LOCALSTORAGE con if (window.localStorage) e indicará cuantos elementos están almacenados alert(localStorage.length); y a continuación carga los datos desde LOCALSTORAGE y los muestra en el formulario.
Solo tiene un botón GUARDAR y otro ELIMINAR, para guardar y eliminar los datos almacenados respectivamente. Cada dato se guardará como una clave/valor diferente, en este caso guardaremos tres claves/valores, aunque con un poco de código es posible guardar muchos valores en una sola clave si fuera necesario.
Cuando la base de datos ha llegado al límite de su máximo contenido ( 5Gb ), se puede comprobar con :
Solo tiene un botón GUARDAR y otro ELIMINAR, para guardar y eliminar los datos almacenados respectivamente. Cada dato se guardará como una clave/valor diferente, en este caso guardaremos tres claves/valores, aunque con un poco de código es posible guardar muchos valores en una sola clave si fuera necesario.
Cuando la base de datos ha llegado al límite de su máximo contenido ( 5Gb ), se puede comprobar con :
try {
localStorage.setItem('foo', 'bar');
} catch (e) {
if (e == QUOTA_EXCEEDED_ERR) {
alert('el almacén local excede el tamaño máximo permitido');
}
}
RECOMENDACION
Si aún no has encontrado un buen EDITOR para HTML y otros (también útil para PYTHON), te recomiendo SUBLIME TEXT
Si aún no has encontrado un buen EDITOR para HTML y otros (también útil para PYTHON), te recomiendo SUBLIME TEXT
