Este artículo es el primero de una serie de 3 artículos:

Introducción

El almacenamiento de HTML5 proporciona una forma de almacenar información en el navegador de forma similar a las cookies, pero diseñado para almacenar grandes cantidades de información.

Las cookies tienen limitaciones de tamaño y los navegadores las envían al servidor cada vez que se recarga la página, consumiendo tiempo y ancho de banda extras.

El almacenamiento de HTML5 almacena los datos en el navegador y las páginas webs acceden a éstos con javascript una vez la páginas están cargadas.

Existen 3 tipos de almacenamiento en HTML5:

  • Local Permite almacenar datos en pares clave/valor en la máquina del usuario. Los datos almacenados son únicos al dominio. (preferencias)
  • Sesión Permite almacenar datos en pares clave/valor, únicamente válidos durante la sesión. (carros de compra o estado de aplicación)
  • Base de datos Permite almacenar datos relacionales ofreciendo una API de base de datos SQL, con todo lo que ello implica.

La interfaz Storage

Tanto el almacenamiento local como el de sesión utilizan la misma interfaz para acceder la información. Si el navegador es compatible con esta característica de HTML5 entonces están disponibles los objetos localStorage y sessionStorage, para almacenamiento local y de sesión respectivamente. Ambos implementan la interfaz Storage y ofrecen las siguientes funciones:

length
Devuelve el numero de pares clave/valor presentes.

localStorage.length
//  0

setItem(key, value)
Crea un par clave/valor

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

key(n)
Devuelve la clave del par en la posición indicada.

localStorage.length
//  2
localStorage.key(0);
//  "altura"
localStorage.key(1);
//  "anchura"

getItem(key)
Obtiene el valor de una clave dada

localStorage.getItem('altura');
//  "100"

removeItem(key)
Elimina un par clave/valor

localStorage.length
//  2
localStorage.removeItem('altura');
localStorage.length
//  1

clear()
Elimina todos los pares actuales existentes.

localStorage.length
//  1
localStorage.clear();
localStorage.length;
//  0

En los ejemplos he usado localStorage, pero el efecto es el mismo con sessionStorage ya que ambos implementan esta interfaz.

La interfaz Storage es extremadamente simple, tanto la clave como el valor serán convertidos a cadenas, por lo que si queremos almacenar estructuras, como listas u otros objetos podemos utilizar JSON.

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]

Almacenamiento local

El almacenamiento local nos permite almacenar datos en el cliente persistir datos en el cliente. Estos datos se almacenan en referencia a un dominio por lo que no es posible acceder a la información almacenada en otro y estarán disponibles hasta que el usuario el usuario los elimine lo que los hace ideales para contener preferencias de aplicación.

Por ejemplo, una aplicación puede ofrecer varios paneles con contenido y el usuario puede seleccionar cuales quiere tener abiertos y cuales ocultos. Así una preferencia de usuario puede ser:

localStorage.setItem('paneles', '1:2:3:4');

Demo

Almacenamiento de sesión

El almacenamiento de sesión nos permite almacenar información a ser usada mientras dure la sesión. La duración de la sesión depende del navegador. Algunos navegadores consideran la sesión mientras dure el proceso, otros mientras la pestaña siga abierta.

El almacenamiento de sesión es perfecto para almacenar el estado de la sesión de usuario. Esta información puede ser tanto el estado de un carro de la compra, el último producto visto, etc...

sessionStorage.setItem('cart_items', [112,120,320]);
var items = sessionStorage.getItem('cart_items');
if (items){
  items = JSON.parse(items);
  alert('Items en el carro de la compra: ' + items.length);
}else{
  alert('No hay items en el carro de la compra');
}

Demo