Ir al contenido principal

El API Javascript de almacenamiento local de HTML5 (local-storage) [Parte 2]

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_1

localStorage.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

Entradas más populares de este blog

3 sencillos pasos para tramitar la ayuda por desempleo de la AFORE

¿Tienes dinero ahorrado en tu AFORE y en este momento no estás trabajando o estás trabajando pero no tienes seguro social?
Si respondiste sí a la pregunta anterior entonces hay una buena noticia para ti: puedes retirar una parte del dinero que tienes ahorrado. Y lo mejor, es muy sencillo.
En este artículo te diré paso a paso qué hacer para obtener ese dinero, sin tecnicismos legales ni nada por el estilo, simple y sencillamente lo que necesitas saber.
Paso Número 1: Obtener los últimos 2 estados de cuenta de tu Afore
Esto en la mayoría de los casos es sumamente sencillo ya que dichos estados de cuenta llegan directamente al domicilio del ahorrador, si este es tu caso puedes saltar lo restante en este punto y continuar con el paso número 2, en caso contrario sigue leyendo…

Si no tienes tus estados de cuenta debes ponerte en contacto con la empresa encargada de administrar tu ahorro para que te los proporcione, normalmente te van a pedir una identificación oficial, comprobante de domici…

Conectar una base de datos en MySQL con NetBeans

NetBeans es una plataforma para el desarrollo de aplicaciones de escritorio usando Java y a un Entorno integrado de desarrollo (IDE) desarrollado usando la Plataforma NetBeans.

Si eres un programador y desarrollas tus aplicaciones en Java seguramente necesitarás conectar una base de datos tipo MySQL a este entorno algún día, bueno, si lo necesitas ahora, he aquí una explicación paso a paso de cómo conectar ambas herramientas.

4 extraordinarias aplicaciones espía para Android

Le andas haciendo al James Bond y necesitas grabar video, voz o tomar fotos desde tu dispositivo Android sin ser notado? Aquí 4 excelentes aplicaciones que facilitarán tus hazañas de 007 en menos de lo que canta un gallo.

Conexión, consulta y ejecución de sentencias en MySQL con Java

Anteriormente escribí este mismo artículo pero para bases de datos en Oracle. En este artículo prácticamente me copio y pego para explicar paso a paso cómo realizar la conexión a MySQL en Java, así como la forma de realizar consultas a los registros existentes y ejecutar sentencias de inserción, borrado y actualización de datos.Al final del artículo tendremos una clase que encapsulará todos los procedimientos necesarios para trabajar con la base de datos.

c606 c6nf5g4r6 e3 tec3ad6 [Como configurar el teclado]

¿Problemas al escribir con el teclado? ¿Tratas de escribir la letra ‘o’ y sale el número ‘6’ o algo por el estilo? La solución puede ser más simple de lo que parece.

La solución a tu problema tras el salto...