Cómo usar LocalStorage con JavaScript y HTML5 [incluye ejemplo]

Taller Práctico de JavaScript: ¡Crea tu Primer Videojuego!

COMPARTE ESTE ARTÍCULO Y MUESTRA LO QUE APRENDISTE

LocalStorage y sessionStorage son propiedades de HTML5 (web storage), que permiten almacenar datos en nuestro navegador web. De manera muy similar a como lo hacen las cookies.

Aprende más sobre este tema en la Escuela de Javascript 🚀

Local Storage

Guarda información que permanecerá almacenada por tiempo indefinido; sin importar que el navegador se cierre.

Session Storage

Almacena los datos de una sesión y éstos se eliminan cuando el navegador se cierra.

Las características de Local Storage y Session Storage son:

Permiten almacenar entre 5MB y 10MB de información; incluyendo texto y multimedia
La información está almacenada en la computadora del cliente y NO es enviada en cada petición del servidor, a diferencia de las cookies
Utilizan un número mínimo de peticiones al servidor para reducir el tráfico de la red
Previenen pérdidas de información cuando se desconecta de la red
La información es guardada por domino web (incluye todas las páginas del dominio)

¡Vamos a los ejemplos!

LocalStorage

Este ejercicio es un ejemplo de cómo funciona este tipo de almacenamiento.

Primero ingresamos los datos y los guardamos. Después, cerraremos y abriremos nuevamente la pestaña o ventana nuestro navegador, daremos clic en “cargar elementos” y nos daremos cuenta de que los datos que almacenamos inicialmente siguen ahí, gracias a la propiedad de LocalStorage.

<html>
    <head>            
        <title>Ejemplo LocalStorage</title>
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">&lt;script&gt; 
        &lt;script&gt;
 /*Funcion de Capturar, Almacenar datos y Limpiar campos*/
$(document).ready(function(){    
    $('#boton-guardar').click(function(){        
        /*Captura de datos escrito en los inputs*/        
        var nom = document.getElementById("nombretxt").value;
        var apel = document.getElementById("apellidotxt").value;
        /*Guardando los datos en el LocalStorage*/
        localStorage.setItem("Nombre", nom);
        localStorage.setItem("Apellido", apel);
        /*Limpiando los campos o inputs*/
        document.getElementById("nombretxt").value = "";
        document.getElementById("apellidotxt").value = "";
    });   
});

/*Funcion Cargar y Mostrar datos*/
$(document).ready(function(){    
    $('#boton-cargar').click(function(){                       
        /*Obtener datos almacenados*/
        var nombre = localStorage.getItem("Nombre");
        var apellido = localStorage.getItem("Apellido");
        /*Mostrar datos almacenados*/      
        document.getElementById("nombre").innerHTML = nombre;
        document.getElementById("apellido").innerHTML = apellido; 
    });   
});

&lt;script&gt;
</head>
        
<center><h1>Ejemplo - localStorage</h1>
              
<input type="text" placeholder="Nombre" id="nombretxt"><br><br>   
<input type="text" placeholder="Apellido" id="apellidotxt"><br><br>
<button id="boton-guardar">Guardar</button><br>
           
<hr />
Nombre almacenado:
<label type="text" id="nombre"></label><br>                          
Apellido almacenado:
<label "text" id="apellido"></label><br>

<button id="boton-cargar">
Cargar elementos
</button>
</center>

<hr />

</body> 
</html>

Session Storage

En este ejemplo los datos se almacenan en una sesión. De esta forma, cuando la pestaña o ventana del navegador se cierra, los datos se eliminan de forma permanente y no podrán cargarse nuevamente. Este método es usado para realizar aplicaciones más seguras y eliminar un almacenamiento innecesario de datos.

<html>
    <head>            
        <title>Ejemplo sessionStorage</title>   
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">&lt;script&gt; 
        &lt;script&gt;
 /*Funcion de Capturar, Almacenar datos y Limpiar campos*/
$(document).ready(function(){    
    $('#boton-guardar').click(function(){        
        /*Captura de datos escrito en los inputs*/        
        var nom = document.getElementById("nombretxt").value;
        var apel = document.getElementById("apellidotxt").value;
        /*Guardando los datos en el LocalStorage*/
        sessionStorage.setItem("Nombre", nom);
        sessionStorage.setItem("Apellido", apel);
        /*Limpiando los campos o inputs*/
        document.getElementById("nombretxt").value = "";
        document.getElementById("apellidotxt").value = "";
    });   
});

/*Funcion Cargar y Mostrar datos*/
$(document).ready(function(){    
    $('#boton-cargar').click(function(){                       
        /*Obtener datos almacenados*/
        var nombre = sessionStorage.getItem("Nombre");
        var apellido = sessionStorage.getItem("Apellido");
        /*Mostrar datos almacenados*/      
        document.getElementById("nombre").innerHTML = nombre;
        document.getElementById("apellido").innerHTML = apellido; 
    });   
});

&lt;script&gt;
</head>
        
<center><h1>Ejemplo - sessionStorage</h1>
              
<input type="text" placeholder="Nombre" id="nombretxt"><br><br>   
<input type="text" placeholder="Apellido" id="apellidotxt"><br><br>
<button id="boton-guardar">Guardar</button><br>
           
<hr />
Nombre almacenado:
<label type="text" id="nombre"></label><br>                          
Apellido almacenado:
<label "text" id="apellido"></label><br>

<button id="boton-cargar">
Cargar elementos
</button>
</center>

<hr />


</body> 
</html>