Herramienta para desarrolladores

Guardar y eliminar datos vía LocalStorage.

LocalStorage es una herramienta bastante útil para los desarrolladores a la hora de necesitar guardar cualquier tipo de datos de nuestros usuarios mientras visitan nuestro sitio. En este artículo explicaré el uso de ésta herramienta y algunos ejemplos, pero antes, es necesario una pequeña introducción.

¿Qué es LocalStorage?

LocalStorage es una herramienta compatible con html5 y los navegadores que lo soportan, incluso explorer desde su versión 8 hacia arriba.

La gracia de ésta es la capacidad para almacenar datos de manera local en el navegador que utiliza el usuario mientras navega. Ésta información quedará almacenada para siempre en cada sesión nueva que inicia el usuario en su navegador, a menos claro, que nosotros queramos eliminarla por alguna razón.

LocalStorage trabaja de manera similar que las cookies, sin embargo, cuenta con un espacio de 5mb y al trabajar de manera local, no necesita hacer peticiones de servidor.

¿Cómo se utiliza LocalStorage?

LocalStorage es una herramienta que se utiliza vía JavaScript, donde podremos manipular nuestros datos almacenados de la forma que estimemos más conveniente. Para comenzar a utilizar localStorage, debemos tener los siguientes métodos en cuenta:

localStorage.setItem(“key”, item);

Este es el método para almacenar información en nuestro localStorage. En el primer parámetro “key” ingresamos el nombre de nuestro elemento, y en el parámetro “item” ingresamos el valor de éste.

Ejemplo:

localStorage.setItem(“userID”, 10);

En éste caso particular estoy guardando en mi localStorage un elemento llamado “userID” con el valor de 10;

localStorage.getItem(“key”);

Con éste método obtenemos desde el LocalStorage el valor de nuestro elemento, donde “key” es el nombre de éste.

Ejemplo:

var userID = localStorage.getItem(“userID”);

Sigamos con el ejemplo anterior, donde almacenames un ID de un usuario X en un elemento que nombramos “userID”. Ahora necesitamos obtener ese valor en una variable, por lo tanto, utilizando el método getItem, le pasamos como parámetro el nombre del elemento a buscar (“userID”) y así nuestra variable queda asignada con el valor que contiene ese elemento.

localStorage.removeItem(“key”);

Este método nos sirve para eliminar de nuestro almacenamiento un elemento de nuestro localStorage, donde “key”, es el nombre de éste.

Ejemplo:

localStorage.removeItem(“userID”);

Siguiendo el mismo ejemplo anterior, esta vez, si por alguna razón necesitamos eliminar el elemento “userID”.

¿Qué pasa si necesito guardar más de un valor en un elemento?

Hasta ahora, sólo hemos visto cómo almacenar un valor dentro de un elemento, cómo obtenerlo y cómo eliminarlo, sin embargo, hay casos en que necesitaremos trabajar con más de un valor en éste.

Supongamos que queremos guardar una cantidad X de precios para un producto en particular, utilizando checkbox que nos permitirán identificar cuándo guardar los valores.

Suponiendo que tenemos en nuestro html:

<input type="checkbox" class="producto" name="producto_1" value="999">

<input type="checkbox" class="producto" name="producto_2" value="888">

<input type="checkbox" class="producto" name="producto_3" value="777">

y nuestro Javascript:

$('.producto').change(function(e){

var precio = $(this).val(); //guardamos el value, que contiene el precio, del checkbox que activamos

var nuevovalor = new Array(); // creamos un array vacío

var getlocal = localStorage.getItem("precios"); //asignamos el elemento "precios" a una varible

var cont;

var parslocal;

if($(this).is(":checked")){

//Si el item está activado guarda el valor en localStorage

if(getlocal != null && getlocal != "" && getlocal != false && getlocal != undefined){ //comprobamos que nuestra variable exista

parslocal = JSON.parse(getlocal); //Transforma la variable con el contenido de nuestro elemento en localStorage a un objeto Javascript

$.each(parslocal, function(index, value){

cont = index;

nuevovalor[index] = value; //llenamos nuestro array vacío con los valores que ya existen en nuestro elemento

});

cont++;

nuevovalor[cont] = precio;

localStorage.setItem("precios", JSON.stringify(nuevovalor));

} else {//en el caso que no exista el elemento en localStorage

var saveLocal = new Array();//Creamos un nuevo array vacío

saveLocal[0] = precio; //asignamos al comienzo de nuestro array, el valor de nuestro elemento

localStorage.setItem("precios", JSON.stringify(saveLocal));//guardamos nuestro valor en localStorage

}

}else {

//Si el item no está activado

if(getlocal != null && getlocal != "" && getlocal != false && getlocal != undefined){//Comprobamos que el elemento existe en localStorage

parslocal = JSON.parse(getlocal);

var contador = 0;

$.each(parslocal, function(index, value){

cont = index;

if(value != precio && value != null && value != undefined && value != false){//si el el valor que estamos haciendo el loop, no coincide al valor ingresado, entonces lo ingresa en el array

nuevovalor[contador] = value;

contador++;

}

});

if(cont == 0){//si cont es igual a 0, significa que sólo se encuentra en nuestro localStorage el precio que ingresamos, por lo tanto solo eliminamos el elemento completo

localStorage.removeItem("precios");

}else{//de lo contrario, existen más valores, pro lo que rehacemos el elemento con los valores que no coincidieron con el encontrado

localStorage.setItem("precios", JSON.stringify(nuevovalor));

}

}

}

});

Primero almacenamos en la variable precio, el value del checkbox que marcamos (o desmarcamos), creamos un array vacío y una variable que tiene asignado los valores del localStorage en el elemento “precios”.

var precio = $(this).val(); //guardamos el value, que contiene el precio, del checkbox que activamos

var nuevovalor = new Array(); // creamos un array vacío

var getlocal = localStorage.getItem("precios"); //asignamos el elemento "precios" a una varible

var cont;

var parslocal;

Luego, se hace una condicional if y else, para saber si el checkbox se encuentra en estado “checked” o no. Para el primer caso significa que queremos almacenar el valor y para el segundo significa que queremos elminar el valor.

if($(this).is(":checked")){

//queremos almacenar el valor

}else{

//queremos eliminar el valor

}

a- Almacenar el valor:

Si se cumple la primera condición (el checkbock se encuentra chequeado) entonces entramos a una nueva condicionante, esta vez, para determinar si el elemento “precios” de nuestro localStorage ya existe o hay que crearlo.

if(getlocal != null && getlocal != "" && getlocal != false && getlocal != undefined){

//el elemento "precios" ya existe

}else{

//el elemento "precios" no existe

}

Como primera instancia, el elemento “precios” nunca antes ha sido creado, por lo tanto creamos un nuevo array vacío, al cual asignamos a su primer elemento el value de nuestro checkbox. Luego creamos el elemento “precio” por primera vez, entregándole como parámetro de valor, el array serializado en formato objeto de JSON.

var saveLocal = new Array();

saveLocal[0] = precio;

localStorage.setItem("precios", JSON.stringify(saveLocal));

En caso contrario, si se cumple que el elemento “precios” de nuestro localStorage existe, deserializamos los valores de este a objeto Javascript y los asignamos a una variable “parselocal”.

parslocal = JSON.parse(getlocal);

Luego, llenamos nuestro array vacio con cada valor del elemento "precios" de nuestro localStorage.

$.each(parslocal, function(index, value){

cont = index;

nuevovalor[index] = value; //llenamos nuestro array vacío con los valores que ya existen en nuestro elemento

});

Ahora, tenemos un array con todos los valores que están en nuestro elemento de localStorage, solo nos falta agregar el valor de nuestro checkbox en el útlimo elemento del array.

cont++;

nuevovalor[cont] = precio;

localStorage.setItem("precios", JSON.stringify(nuevovalor));

Finalmente, lo que hacemos es rehacer el elemento “precios” de localStorage, pero agregando al final el último valor.

b- Eliminar el valor:

Siguiendo la misma dinámica que para agregar un nuevo valor, primero comprobamos que existe nuestro elemento “precios” en localStorage.

if(getlocal != null && getlocal != "" && getlocal != false && getlocal != undefined){

//el elemento "precios" existe

}

Seguimos la misma lógica, asignamos a una variable los valores y luego metemos en un array vacío todos los valores existentes del elemento “precios”. Si notan, ahora tenemos una condición para que el array se llene con los valores, significa que si el valor que queremos eliminar, no se encuentra en el elemento “precios” no ingrese al array.

parslocal = JSON.parse(getlocal);

var contador = 0;

$.each(parslocal, function(index, value){

cont = index;

if(value != precio && value != null && value != undefined && value != false

nuevovalor[contador] = value;

contador++;

}

});

Finalmente, tenemos un array lleno con todos los valores de nuestro elemento “precios” menos el que queremos eliminar, ahora solo basta con rehacer el elemento, entregándole los datos de nuestro nuevo array, pero antes, fíjense en el código anterior, en la variable contador, si contador termina valiendo 0, quiere decir que no encontró más valores, y solo existe el valor que queremos eliminar, por lo tanto, condicionamos nuevamente, si “contador” es igual a 0, entonces que borre por completo el elemento “precios”, y en caso contrario, rehace el elemento con los valores del array que llenamos.

if(cont == 0){

localStorage.removeItem("precios");

}else{

localStorage.setItem("precios", JSON.stringify(nuevovalor));

}

Si bien en un comienzo es algo complejo comprender la dinámica del localStorage, una vez que le tomamos la mano, es una herramienta bastante útil que nos puede sacar de apuros en momentos que necesitamos guardar datos de nuestros usuarios.

LocalStorage es utilizado en muchos sitios que ocupan carrito de compras, o trabajan con datos de usuarios, y así muchos ejemplos de sitios que trabajan con almacenamiento de datos por parte del usuario.