Almacenamiento local utilizando HTML 5. Programación en Castellano.

Categorías destacadas

Artículo

Inicio Artículo Internet HTML

¡votar!

Almacenamiento local utilizando HTML 5

HTML5 proporciona una forma de almacenar información en el navegador, similar a como lo hacen las Cookies, pero que permiten almacenar información más grande, ya que las cookies tienen un tamaño limitado.

El utilizar el almacenamiento respecto a utilizar las cookies tiene ventajas, sobre todo de tráfico, ya que cuando se almacena algo en las Cookies, al entrar en la web, estas son enviadas al servidor, consumiendo ancho de banda y tiempo.

HTML 5 permite el almacenamiento de 3 formas distintas.

Local: los datos son almacenados en la máquina del usuario como pares de clave/valor.
Sesión: Se almacenan información como pares de clave/valor, pero solo durante lo que dure la sesión.
Base de datos: Ofrece una API completa para almacenar información en base de datos.

Nosotros vamos a centrar en los dos primeros tipos de almacenamiento.

El almacenamiento local y de sesión, implementan la misma interfaz Storage, por lo que su funcionamiento será muy similar.

Los navegadores compatibles con HTML 5 dispondrán de los objetos localStorage y sessionStorage, para el almacenamiento local y sesión respectivamente. Esta interfaz ofrece los siguientes métodos.

Método Length

Este método nos devolverá el número de pares clave/valor almacenados.

localStorage.length // 0

Método SetItem(key, value)

Este método se encarga de añadir un nuevo elemento en nuestro almacén.

localStorage.setItem('altura', '100'); 
localStorage.setItem('anchura', '500');

Método Key(n)

Devuelve el par clave/valor de la posición indicada.

//devuelve altura del ejemplo anterior
localStorage.key(0);

Método getItem(key)

Obtiene el valor de una clave dada

// devuelve el valor de altura del ejemplo anterior
localStorage.getItem('altura');

Método removeItem(key)

El método lo que hará será borrar el elemento que le indiquemos

localStorage.removeItem('altura');

Método clear()

Con este método se borrarán todos los elementos almacenados.

localStorage.clear();

Cuando almacenamos pares claves/valor, lo que hace la interfaz es almacenar la información como si fueran cadenas, por lo que podemos utilizar la notación JSON para poder almacenar objetos o cualquier otra cosa que nos interese.

var list = [1,2,3,4];
localStorage.setItem('lista', list);
localStorage.getItem('lista');
// "1,2,3,4"
var json_list = JSON.stringify(list);
// "[1,2,3,4]"
localStorage.setItem('lista', json_list);
// "[1,2,3,4]"
JSON.parse(localStorage.getItem('lista'));
// [1, 2, 3, 4]

Este tipo de almacenamiento nos puede ser muy útil si necesitamos almacenar alguna preferencia del usuario, o bien productos de una tienda, para almacenarlos en sessionStorage.

Vía: theproc.es