28 de marzo de 2018

Uso de LocalStorage con JS

LocalStorageCon 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.

  1. 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

Deja una Respuesta