Con la llegada de la versión 5 de HTML, el diseño web se volvio un poco mas sencillo, y entre las cosas mas importantes que trae HTML5, esta el uso de LocalStorage y SessionStorage, ambos almacenan información en el navegador, aunque con diferencias interesantes.SessionStorage: Almacena los datos en una sesión y estos se eliminan al cerrar el navegador.
LocalStorage: Almacena información que se mantiene almacenada por tiempo indefinido, sin importar que el navegador se cierre.
En este articulo solo me enfocare al LocalStorage.
Sus principales caraceristicas son:
- Almacena texto y datos multimedias hasta 5Mb
- La información se almacena en el equipo del cliente
- Previene perdida de información cuando se pierde la conexión a la red
Su uso e inplementación es muy sencilla.
- Creamos nuestro archivo html, al que llamaremos index.html, el cual tendra la siguiente estructura
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>LocalStorage</title>
</head>
<body>
<h1>LocalStorage</h1>
<p>
<input type="text" id="informacion"><br>
<button onclick="guardarDatos();">Guardar datos</button></p>
<p><button onclick="mostrarDatos()">Mostrar datos</button></p>
<script>
function guardarDatos(){
var data = document.getElementById("informacion").value;
localStorage.setItem("misdatos", data);
alert("Información almacenada");
document.getElementById("informacion").value = null;
}
function mostrarDatos(){
document.getElementById("informacion").value = localStorage.getItem("misdatos");
}
</script>
</body>
</html>
Explico un poco el código….
Para almacenar información se usa la sintaxis
localStorage.setItem(variable, información);
En el ejemplo mi variable es “misdatos” y la información es lo que tiene almacenado la variable ‘data’ la cual tiene la información del cuadro de texto.
localStorage.setItem("misdatos", data);
Para recuperar la información, solo mandamos a llamar la variable del localStorage
localStorage.getItem("misdatos");
Eso es todo, ¡muy fácil verdad!
Para eliminar el localStorage, solo utiliza
localStorage.removeItem(variable);
En este caso seria
localStorage.removeItem("misdatos");
Espero te haya gustado, no te olvides suscribirte y seguirnos en Facebook
