jueves, 29 de septiembre de 2016

Almacenar datos en la Web Local Store vs. Session Storage.Javascript

Antes de HTML5 y de Internet Explorer 9 nos valiamos de las cookies y las variables de sesión a la hora de almacenar valores que utilizaremos en nuestro sitio web. Las cookies permanecen expuestas en nuestro equipo y las variables de sesión nos ofrecían una manera muy 'volatil' ambos menos seguros que el localStorage y el sessionstorage actuales.
Mientras las variables de sessionStorage tienen un tiempo de vida util dependiendo de que este abierta o no la session en nuestro server, las variables del LocalStorage pueden durar días,meses, años. La ventaja es que estas no pueden ser utilizadas por otro sitio web diferente del que las creó por lo que el margen de seguridad es mucho mas amplio, y sin viajar con cada petición al Server ya que estas permanecen en el cliente. 

Ademas el espacio de almacenamiento es mucho mas amplio y no se limita solo a valores, podemos almacenar archivos, colecciones, valores numéricos y strings sin límite en su capacidad de almacenamiento. Los datos del Local Storage permanecerán hasta que el usuario decida borrar los datos del navegador y su uso no debe ser orientado a manejar  grandes volúmenes de data sino para la gestión de los flujos de datos de navegación.

Para chequear si nuestro navegador soporta localStorage lo hacemos de la siguiente manera :

if (typeof(Storage) !== "undefined") {
    // Codigo para el manejo de localStorage/sessionStorage.
} else {
    // Lo siento no se soporta el Web Storage!..
}

Para almacenar un valor:


//Guardar un valor numerico
localStorage.setItem("edad", 99);
sessionStorage.setItem("edadsession",99);
var edad=ParseInt(localStorage.getItem("edad"));
var edad2=ParseInt(sessionStorage.getItem("edadsession"));

//Guardar un valor string 
localStorage.setItem("Apellidos", "López");
//o lo que es lo mismo
localStorage[Apellidos]="Lopez";

// Recuperarlo
document.getElementById("result").innerHTML = localStorage.getItem("Apellidos");


Para almacenar una colección Json (solo en navegadores que soporten JSON)


var me= {name:'José',age:46,gender:'male'};

localStorage.setItem("user",JSON.stringify(me));
console.log(localStorage.getItem("user")); 

Podemos conocer la cantidad de objetos almacenados en el localStorage o en el sessionStorage

sessionStorage.length o LocalStorage.length dependiendo cual sea el caso
o removerlos cuando necesitemos liberar algun contenido asi:

localStorage.removeItem('edad');

Aunque la cantidad de datos almacenada no le restará velocidad o capacidad de procesamiento a la web el uso de LocalStorage y SessionStorage no debe ser orientado para almacenar grandes volúmenes de data sino para la data necesaria para la gestión de los flujos de datos de navegación.

Fuente: http://www.w3schools.com

No hay comentarios:

Publicar un comentario