localStorage y sessionStorage

localStorage y sessionStorage en JavaScript

Almacenar datos en local con JavaScript.

localStorage y sessionStorage, son propiedades que acceden al Objeto Storage del navegador y tienen la función de almacenar datos de manera local, la diferencia entre éstas dos es que localStorage almacena la información de forma indefinida o hasta que se decida limpiar los datos del navegador y sessionStorage almacena información mientras la pestaña donde se esté utilizando siga abierta, una vez cerrada, la información se elimina.

JavaScript, provee de varias formas para el manejo de datos, aunque inicialmente el almacenamiento de datos usando JavaScript era relativamente conflictivo: las variables desaparecían cuando se pasaba de una página web a otra. Hoy día existen herramientas que facilitan el trabajo a los programadores web permitiendo la persistencia de la información sin necesidad de almacenarla en el servidor, como es el caso de la api Web Storage.

Con la api Web Storage se ha potenciado el manejo de datos con algo más potente que las cookies, de las que otro día hablaremos para ver sus cualidades y también sus limitaciones. Con Web Storage se utiliza el ordenador del usuario, para almacenar información relativa a la navegación web. Esa información almacenada es recuperada cada vez que es necesario.

Es importante saber que esta información que queda almacenada a su vez queda relacionada con el sitio web o la aplicación que la ha creado de tal modo que no podrá ser utilizada por cualquier otra distinta de la que los creó

Debe tenerse en cuenta que los datos almacenados tanto en localStorage como en sessionStorage son específicos del protocolo de la página.

Las claves y los valores son siempre cadenas de texto (ten en cuenta que, al igual que con los objetos, las claves de enteros se convertirán automáticamente en cadenas de texto).

localStorage y sessionStorage

Soporte de navegadores.

Aunque todos los navegadores modernos admiten estas propiedades, es conveniente cerciorarnos que estas están disponibles en el navegador que las va utilizar, con una pequeña validación sabremos si el objeto Storage esta presente en nuestro navegador.

Veamos el código

if (typeof(Storage) !== 'undefined') {
    // Código cuando Storage es compatible
} else {
    // Código cuando Storage NO es compatible
}

sessionStorage

Métodos y propiedades.

localStorage y sessionStorage, son propiedades que permiten acceder al un objeto Storage asociado a la sesión actual. En el cual se guarda la información en formato JSON, para su posterior acceso cuando esta sea necesaria.

Existen diversos métodos y propiedades para trabajar con estos datos

sessionStorage.setItem(‘clave’, ‘valor’);

Guarda la información valor a la que se podrá acceder invocando a clave. Por ejemplo clave puede ser nombre y valor puede ser Juan así:

// Almacena la información en sessionStorage
sessionStorage.setItem('nombre', 'Juan');

sessionStorage.getItem(‘clave’)

Recupera el value de la clave especificada. Siguiendo el ejemplo anterior, si clave es nombre puede recuperar “Juan” así:

// Obtiene la información almacenada desde sessionStorage
var data = sessionStorage.getItem('nombre');

sessionStorage[clave]=valor

Como no podemos olvidar que estamos trabajando con Objetos en JavaScript, el acceso/modificación o inserción a los datos almacenados en el objeto Storage es igual que al cualquier otro objeto mediante la sintaxis del corchete así:

// Almacena la información en sessionStorage
sessionStorage['nombre']='Juan';

Así lo asignamos y podríamos recuperarlo así:

// Obtiene la información almacenada desde sessionStorage
var data = sessionStorage['nombre'];

Del mismo modo, como en cualquier objeto podemos usar la sintaxis del punto para acceder, modificar etc. así:

// Almacena la información en sessionStorage
sessionStorage.nombre='Juan';
// Obtiene la información almacenada desde sessionStorage
var data = sessionStorage.nombre;

sessionStorage.length

Como en cualquier objetos .length, devuelve el número de items guardados por el objeto Storage actual

// Obtiene el numero de elementos
var numero = sessionStorage.length;

sessionStorage.key(i)

Igualmente como es un objeto, cada ítem se almacena con un índice que comienza por cero y se incrementa de uno en uno cada vez que añadimos un nuevo valor. con el método Key podemos acceder a la clave que tiene como posición el índice que le pasamos como argumento.

// Almacena la información en sessionStorage
sessionStorage.nombre='Juan';
sessionStorage.apellido='Juan';
sessionStorage.edad='35';

// Obtiene la información almacenada desde sessionStorage
var apellido = sessionStorage.key(1);

En este ejemplo creamos un nuevo objeto Storage con tres valores nombre = ‘Juan’, apellido = ‘Lopez’, y edad=35 en ese orden así pues como se comienza con el índice 0, si accedemos al índice 1 estamos accediendo a la propiedad apellido.

sessionStorage.removeItem(clave)

Elimina un ítem almacenado en sessionStorage el cual es pasado como argumento en forma de la clave del elemento buscado, siguiendo el ejemplo anterior eliminamos apellido así:

sessionStorage.removeItem('apellido');

sessionStorage.clear()

Elimina todos los ítems almacenados en sessionStorage, quedando vacío el espacio de almacenamiento.

localStorage

Métodos y propiedades.

Del mismo modo podemos usar los mismos métodos para localStorage, por ejemplo:

localStorage.setItem('miGato', 'Juan');
var cat = localStorage.getItem('miGato');
localStorage.removeItem('miGato');
localStorage.clear();