En la parte 1 de esta serie se analizaron los antecedentes del almacenamiento local de HTML, sus ventajas y desventajas. De igual manera se sentaron las bases teóricas de lo que trae para nosotros el API Javascript de almacenamiento de HTML5.
En este artículo abordaremos el tema de manera práctica y con ejemplos reales. ¿Quieres aprender a utilizar todas las ventajas que HTML5 tiene para ti? Sigue leyendo…
Antes que todo es importante que te pongas al tanto sobre las cuestiones básicas de HTML5, en caso de que estés un poco fuera de contexto te recomiendo leer este artículo para luego regresar aquí.
Repasando un poco
- Cada navegador moderno tiene almacenamiento local disponible para almacenar pares de datos.
- Con ese almacenamiento local puedes tomar una llave y un valor para ella y almacenarlas directamente en el navegador.
- El almacenamiento local provee de 5Mb (en algunos navegadores puede llegar hasta 10Mb) por dominio.
- Ningún dominio puede acceder a los datos almacenados por otro.
Manos a la obra
Llegó a hora de codificar un poco, te recuerdo que se recomienda montar la aplicación en un servidor web (puedes instalar el XAMPP) para que todos los procedimientos puedan ejecutarse.
Lo primero que necesitas es un archivo html con el formato general de html5, algo parecido a lo siguiente:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML 5</title>
<script src="script.js"></script>
</head>
<body>
<h1>Almacenamiento Local</h1>
</body>
</html>
Si lo revisas a detalle verás que utilizaré el archivo llamado script.js (que se encuentra en la misma ruta de mi archivo html) para programar mis scripts que trabajarán con almacenamiento local.
Esto es todo lo que haremos de momento con el archivo html, pasemos al código Javascript.
Lo primero que haremos será verificar si el navegador en uso soporta el API de almacenamiento local, si tu navegador es actual seguramente no tendrás ningún problema. Lo anterior podemos verificarlo con las siguientes líneas de código:
if (window["localStorage"]) {
//SI soporta almacenamiento local
}else{
//NO soporta almacenamiento local
alert('Tu navegador es demasiado viejo, ¡actualízate!');
}
Ya que hemos verificado que el API es soportada podemos llamarla directamente mediante localStorage y de paso establecemos el primer valor mediante el método setItem()…
localStorage.setItem("bienvenida", "Bienvenido al mundo de HTML5!");
Al realizar lo anterior accedemos al espacio asignado para el dominio actual (si lo ejecutas en tu máquina localmente el dominio será "ArchivosLocales") y almacenas la cadena "Bienvenido al mundo de HTML5!" en la llave "bienvenida".
Podemos agregar tantos valores como sea necesario por medio del mismo método y con la misma sintaxis…
localStorage.setItem("tarea_1","Aprender a utilizar el API de almacenamiento local");
Es importante tomar en cuenta que los pares de datos (llave/valor) deben ser ambos en formato de cadena y una vez que se han establecido dichos valores con el método setItem() estos son alojados en el almacenamiento local de manera persistente y permanecen ahí si cierras la ventana del navegador, el navegador completamente o incluso si reinicias la computadora. Al llamar más de una vez el método setItem() con la misma llave se sobrescribe el valor que esta tenía antes de la llamada.
Como es de esperarse existe un método para recuperar los valores almacenados previamente: getItem(). Este método nos ayuda a recuperar el valor utilizando su llave para identificarlo.
var tarea = localStorage.getItem("tarea_1");
Al realizar lo anterior estarás dando el valor que fue almacenado como tarea_1 a la variable tarea. Debes tomar en cuenta que el obtener un elemento no hace que este sea eliminado, únicamente se está consultando el valor que este tiene.
¿Qué sucede si necesito almacenar números y no cadenas?
El API de almacenamiento local trabaja únicamente con cadenas de texto, sin embargo, es perfectamente válido hacer algo como esto:
localStorage.setItem('numero',5);
Lo que sucede en este caso es que, aún cuando aparentemente estamos almacenando un número 5, internamente Javascript lo interpreta como una cadena, es decir, '5'. Para poder utilizarlo como número entero es necesario hacer una conversión al obtenerlo, algo parecido a lo siguiente:
var miNumero = parseInt(localStorage.getItem('numero');
Lo mismo sucede si almacenamos números flotantes:
localStorage.setItem('flotante',9.99);
var precio = parseFloat(localStorage.getItem('precio'));
Otra manera de hacerlo...
El API de almacenamiento local no solamente cuenta con los famosos métodos get y set, de igual manera es posible almacenar datos de la siguiente forma:
localStorage['apodo'] = 'Monillo007';
y a su vez puede ser obtenido así:
var apodo = localStorage['apodo'];
Ambas sintaxis son válidas pero esta última es un tanto más legible y concisa, sin embargo...
Aún hay más...
El API también provee de 2 datos interesantes, la propiedad length y el método key(). La propiedad length contiene el número de datos almacenados por el dominio actual y el método key() accede al valor de dicha propiedad por medio de su índice (y no de su llave como lo hemos visto hasta este momento).
for (var i = 0; i < localStorage.length; i++) {
var llave = localStorage.key(i);
var valor = localStorage[key];
alert(valor);
}
Es necesario tomar en cuenta que al hacer algo como lo mostrado anteriormente el orden en que obtenemos los datos es indefinido, incluso en diferentes navegadores el orden puede variar. Es completamente seguro que obtendrás todos los valores que se han almacenado pero no se garantiza el orden en que estos puedan aparecer.
Eliminar valores
Hasta ahora ya sabemos cómo agregar y consultar los valores almacenados pero ¿cómo se eliminan?
Para realizar esta función tenemos 2 métodos simples: removeItem() y clear(). El primero de ellos, removeItem(), elimina un elemento de la lista de valores almacenados mediante su llave, algo parecido a lo siguiente:
//Eliminando el elemento tarea_1localStorage.removeItem(“tarea_1”);
El segundo de ellos, clear(), limpia completamente el almacenamiento local para el dominio actual, es decir, elimina todos los valores agregados previamente. Es recomendable utilizar este método a conciencia por obvias razones.
localStorage.clear();
Recapitulando
- Cada navegador moderno tiene almacenamiento local disponible para almacenar pares de datos.
- Con ese almacenamiento local puedes tomar una llave y un valor para ella (ambas en formato de cadena) y almacenarlas con el método setItem(), el cual recibe como primer parámetro la llave y como segundo parámetro el valor para la misma.
- Al llamar más de una vez el método setItem() con la misma llave se sobrescribe el valor que esta tenía antes de la llamada.
- Una vez que se han establecido dichos valores con el método setItem() estos son alojados en el almacenamiento local de manera persistente y permanecen ahí si cierras la ventana del navegador, el navegador completamente o incluso si reinicias la computadora.
- El método getItem() nos ayuda a recuperar un valor previamente establecido en el almacenamiento local a través de su llave.
- Ningún dominio puede acceder a los datos almacenados por otro.
- La propiedad length nos indica la cantidad de datos existentes en el almacenamiento local.
- El método key() nos devuelve el valor de un elemento obtenido por medio de su índice.
- Se pueden almacenar y obtener valores en formato de arreglo, es decir, localStorage["llave"] = "valor" para guardar y var valor = localStorage["llave"] para obtener.
- Para eliminar un elemento almacenado previamente se utiliza el método removeItem().
- Para limpiar la lista de elementos almacenados se utiliza clear().
Hasta aquí llegamos con la segunda parte de esta serie del API Javascript de Almacenamiento local de HTML5, en los siguientes artículos estaremos abordando diferentes temas relacionados a esta tecnología por lo que te recomiendo estar al tanto y suscribirte al blog si aún no lo has hecho.
Si quieres conocer más acerca de HTML5 no dudes en darte una vuelta por este enlace y si te gustó el artículo puedes compartirlo desde los botones sociales (Twitter, Facebook, Google+).
Comentarios
Publicar un comentario
Este es un espacio abierto, puedes escribir lo que gustes respetando los siguientes puntos:
1.- Lo que escribas esté relacionado con el post, si gustas contactarme puedes hacerlo aqui.
2.- Todo es cuestionable, aunque ten en cuenta que existen formas de hacerlo, evita las agresiones y revisa tu lenguaje antes de publicar un comentario.
3.- Siempre hay tres verdades: tu verdad, mi verdad y la verdad, por lo que opiniones diferentes no necesariamente son equivocadas.
4.- Los comentarios son una forma de discusión abierta, por lo que al publicar uno, implícitamente entras a una discusión, con todo lo que esto representa.
5. Me reservo el derecho de eliminar comentarios que no respeten las condiciones mencionadas anteriormente.
Toma en cuenta que puedes utilizar emoticones en tu comentario, para ver una lista de los disponibles da clic en este enlace.