LocalStorage y SessionStorage

LocalStorage y SessionStorage (Las cookies de Html5)

LOCALSTORAGE Y SESSIONSTORAGE

La API de Almacenamiento Web (WebStorage) es una librería de almacenamiento web que ofrece dos propiedades (LocalStorage y SessionStorage) que permiten almacenar datos en el navegador del cliente llegando a superar los 5MB. LocalStorage mantiene los datos por tiempo indefinido mientras que SessionStorage elimina los datos cuando se cierra la página o pestaña. Los datos, que se almacenan en formato tipo clave-valor, deben siempre ser almacenados en cadenas de texto (en el caso de objetos JSON será necesario convertirlos a string). Una de las diferencias a destacar respecto a las cookies es, que al residir en el navegador del cliente, éstas no necesitan realizar peticiones al servidor.

Nota: Es recomendable, por temas de compatibilidad (IE6, IE7,...) en navegadores anteriores, crear una condición para comprobar si el navegador del cliente soporta LocalStorage.

En el siguiente ejemplo se muestra la comprobación de LocalStorage en el navegador y distintos métodos de LocalStorage que permiten almacenar, obtener y eliminar.

//comprobación de compatibilidad
if(typeof(Storage) === "undefined"){
    alert("El navegador no soporta LocalStorage");
    return false;
}
//almacenando datos
localStorage.setItem("nombre", "Alejandro");
//obteniendo datos
document.getElementById("name").innerHTML = localStorage.getItem("nombre");
//eliminando datos
localStorage.removeItem("nombre");
//eliminando todos los datos
localStorage.clear();

El código de abajo muestra el mismo proceso pero manejando objetos.

var coche = { 
    color: "Rojo",
    puertas: "5",
    modelo: "Sport"
}
//Convirtiendo objeto a string
var cocheConvertido = JSON.stringify(coche);
//almacenando objeto
localStorage.setItem("coche", cocheConvertido);
//Convirtiendo string a objeto
var cocheRecuperado = JSON.parse(localStorage.getItem("coche");
//Obteniendo propiedad del objeto
document.getElementById("div").innerHTML = "Color: "+ cocheRecuperado.color;

componente html

<!DOCTYPE HTML>
<html lang="es">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Curso Javascript</title>
		<script type="text/javascript" src="localstorage.js"></script>
	</head>
	<body>
		<div id="div"></div>
	</body>
</html>

Comentarios: 0