API HTML5 WebStorage

 

Esta es una de las especificaciones incluidas en la parte de Javascript de HTML5, que permite a las páginas web almacenar información en la parte del cliente, es decir, el navegador web. Consta de dos mecanismos (explicados con detalle en apartados más adelante) parecidos a las cookies de sesión de HTTP, pero que permiten almacenar cantidades más grandes de datos, siempre en modo texto.

Como veremos más tarde, 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.

La mayoría de los navegadores dan soporte desde hace tiempo a estos mecanismos de almacenamiento; por tanto, se pueden implementar ya perfectamente en los sitios web que realizamos en la actualidad.

La información que se guarda en el navegador no se almacena encriptada, a no ser que se haya encriptado previa y explícitamente mediante Javascript por otros mecanismos ajenos al propio API WebStorage.

A diferencia de las cookies, la información almacenada sólo puede ser accedida desde la parte del cliente, es decir, no existe un mecanismo para acceder directamente desde PHP o cualquier otro lenguaje de servidor a los datos del WebStorage.
 

COOKIES VS. STORAGE

 

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.

 

PRIMER MECANISMO: SESSIONSTORAGE

Este mecanismo está pensado para 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.

• Ej.: Para el caso de un formulario de registro. Para que si el usuario pierde la conexión y debe darle a actualizar (F5), no tenga que volver a introducir los datos.

 

SEGUNDO MECANISMO: LOCALSTORAGE

Este mecanismo está pensado para 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.

• Ej.: Para el caso de un formulario de "logeo". Para que el usuario no tenga que introducir los datos cuando pulse a 'No cerrar sesión'

 

EJEMPLO de SessionStorage

En este apartado se puede ver como se aplica lo explicado anteriormente en un ejemplo sin utilidad, pero práctico a su vez, para entender como se accede a dichos objetos. Está escrito para sessionStorage. Para localStorage habría que sustituir sessionStorage por localStorage.

//Comprobación de soporte del navegador
   if (window.sessionStorage != null) {
//Recuperar claves suponiendo que existe una clave llamada 'propiedad'
      var propiedad1 = sessionStorage.propiedad; //Acceso: objeto
      var propiedad2 = sessionStorage["propiedad"]; //Acceso: array asociativo
      var propiedad3 = sessionStorage.getItem("propiedad"); //Acceso: método
      //Guardar la clave 'propiedad' con el valor 'valor'
      sessionStorage.propiedad = "valor"; //Asignación: objeto
      sessionStorage["propiedad"] = "valor"; //Asignación: array asociativo
      sessionStorage.setItem("propiedad", "valor"); //Asignación: método
      //Borrar una única clave
      sessionStorage.removeItem("propiedad");
      //Borrar todas las claves
      sessionStorage.clear();
      //Obtener la clave de la posición 1
      sessionStorage.key(0);
      //Saber cuántas claves hay
      var cuantas_claves = sessionStorage.length;
   }

Se verá un ejemplo más completo y complejo en el siguiente artículo sobre WebStorage.