El llamado Local Storage de HTML5 hace referencia al guardado de datos temporales y locales en el lado del cliente. El Almacenamiento Local nos da la posibilidad de guardar datos hasta que se reinicie el Navegador o se limpie manualmente la variable de datos temporales.
Esto le agregara mas posibilidad a nuestras Aplicaciones Web dando el poder de manejar datos temporales en tanto el navegador no se reinicie, abriendo una gamma de posibilidades inmensas, todo esto de la mano de puro codigo javascript.
Vamos a lo que nos ocupa para el ejemplo que vamos a explicar, al final pondremos el codigo completo y una version descargable/funcional para el uso posterior.
HTML5 LocalStorage.
Para el Almacenamiento Local nuestro navegador debe soportarlo , nosotros usamos el Google Chrome por su alta compatibilidad con los estandares HTML5.Tambien decir que el localStorage depende basicamente de 2 funciones una para asignar el valor (setItem) y otra para obtener el valor de una variable temporal local previamente asignada (getItem).
La primera parte de Almacenamiento Local de HTML5 , es decir la parte de asignacion de valores se logra con la sentencia :
window.localStorage.setItem('indentificador', "valor");
El codigo anterior inicia una variable local identificador, el cual puede ser sustituido por cualquier texto validor como identificador.
window.localStorage , es la funcion HTML5 donde se encuentra las posibilidades de localStorage.
Con la funcion setItem(‘identificador’,»valor») de localStorage es con la cual trabajaremos para iniciar la variable temporal con su valor respectivo.
Ahora pasemos a la parte de obtener los datos, la funcion es :
window.localStorage.getItem('identificador');
Esta funcion es encargada de obtener los datos de una variable temporal previamente creada y asignada.El argumento que se pasa a la funcion getItem es el nombre del identificador y el dato devuelto es el valor que se le haya asignado a esa variable de almacenamiento temporal.
Script de Ejemplo 1
Para ilustrar lo leido vamos a hacer un script donde vamos a aplicar el localStorage para uso en aplicaciones web posteriores.
Vamos a iniciar con nuestro script de javascript y lo primero que haremos sera obtener un contenedor donde pondremos el texto: Guardando texto Localmente (Esto estara disponible hasta que se reinicie el navegador, y crearemos un textarea que tendra 300px de anchoy 150px de alto, y este elemento lo agregamos al contenedor, notar que para seleccionar nuestro contenedor usamos el querySelector de HTML5 que es una evolucion de getElementById, todo lo anterior se logra con el siguiente codigo javascript :
document.querySelector('#content').innerHTML =
'<p><em>Guardando texto Localmente (Esto estara disponible hasta que se reinicie el navegador)</em></p>';
var area = document.createElement('textarea');
area.style.width = '300px';
area.style.height = '150px';
document.querySelector('#content').appendChild(area);
Una vez creado el textarea inicialmente iniciara vacio, por lo que para rellenarlo usaremos el valor que haya en la variable de localStorage para motrar , esto sucedera cuando se presione F5 en la pagina que todo se borra pero los datos Temporales quedan guardados hasta iniciar el navegador, al presionar F5 los valores no se borraran mas bien se recargaran de manera que al recargar la pagina o incluso cerrar la pesta~a del navegador los datos estaran guardados, para esto hacemos.
if (!area.value) {
area.value = window.localStorage.getItem('texto');
}
Ahora trabajamos con el textarea, cada vez que presionemos una tecla sobre el textarea el evento keyup activara la creacion de los datos Temporales de localStorage por lo que se deducira que hay cambios en los datos, los valores temporales se asignaran y reasignaran con cada dato insertado, el codigo :
area.addEventListener('keyup', function () {
window.localStorage.setItem('texto', area.value);
window.localStorage.setItem('timestamp', (new Date()).getTime());
}, false);
Con esto tendremos listo nuestro script de ejemplo para el localStorage.
 |
opcion 0: Ejemplo sin localStorage
opcion 1: Ejemplo Aplicando localStorage opcion 2 : Descargar Los Ejemplos |
Si le ponemos atencion al ejemplo que no aplica localStorage con solo darle recargar a la pagina los datos se borran y en el ejemplo que aplica el localStorage los datos solo se borran cuando se reiniciar el navegador.
Gracias !!, Saludos