10

Cómo usar LocalStorage con JavaScript y HTML5

792Puntos

hace 6 años

Curso de HTML y CSS
Curso de HTML y CSS

Curso de HTML y CSS

Aprende a crear sitios web con HTML y CSS. Profundiza en el desarrollo y personalización de páginas web navegables, intuitivas y a la medida de tus necesidades. Crea tus primeros proyectos con Platzi.

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.

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><scriptsrc="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><scriptsrc="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>


Si quieres aprender más de Local Storage, sessionStorage y otras propiedades de HTML5, no te puedes perder el Curso de fundamentos de Javascript Regístrate hoy.

Curso de HTML y CSS
Curso de HTML y CSS

Curso de HTML y CSS

Aprende a crear sitios web con HTML y CSS. Profundiza en el desarrollo y personalización de páginas web navegables, intuitivas y a la medida de tus necesidades. Crea tus primeros proyectos con Platzi.
Escribe tu comentario
+ 2
Ordenar por:
5
11920Puntos

Hola Carlos, me gustaria comentarte que localStorage y sessionStorage no se explican en el curso, desafortunadamente

1
3Puntos

Es lo que necesitaba, agarre un trabajo freelancer en heiwork y me pidieron que haga esto, gracias, voy a ponerlo en practica

1
3Puntos

Hola Carlos.
¿Existe alguna manera de acceder a los datos que fueron almacenados usando Local Storage o sessionStorage desde una aplicación windows? Me explico: tengo una pagina que guarda datos en localStorage y quiero desde un un ejecutable (aplicacion.exe) acceder a esos datos, todo esto en la pc cliente donde el navegador accedió a mi página.
Gracias.

1
11920Puntos
2 años

Muy técnicamente si, porque los datos, en ultimas, se almacenan en un archivo dentro de la carpeta donde esta el navegador; pero no es práctico ni cómodo, ni útil, para eso puedes usar una API, especialmente diseñada para la comunicación entre varios servicios.

1
4452Puntos

wow muchas gracias por la información

1
3Puntos

Hola!
Tengo una duda.

¿Este método permite que un botón de traducción (Que está en todas las páginas de mi proyecto) al presionarse se mantenga en todas las páginas?
Resulta que al cambiarme de página tengo que volverla a traducir y yo deseo que al darle una vez permanezca así hasta quererlo cambiar de nuevo.

0
6247Puntos

Esto me acaba de servir como no tienen idea! Gracias!

0
4Puntos

Buenos dias!
Me gusta mucho aprender soy novato y esta funcion es la que necesito pero no se nada de javascript y quisiera que cuando lo guarde aparezca el texto automaticamente.
Gracias

0
8912Puntos
3 años

Hola, en Platzi, puedes encontrar muy buenos cursos de Javascript que te llevara de novato a avanzado.

0
2Puntos

Hola, gracias por la guia, estoy usando LocalStorage para validar que no haya mas de una pestaña abierta con el siguiente codigo:

if (+localStorage.tabCount > 0) {
        alert('Estimado usuario, este sitio se encuentra activo en otra pestaña del navegador.');
        location.href = "../FinSesion.aspx";
    }
    else
        localStorage.tabCount = 0;

    localStorage.tabCount = +localStorage.tabCount + 1;
    window.onunload = function () {
        localStorage.tabCount = +localStorage.tabCount - 1;
    };

el problema es que se mantiene el localstorage cuando se “crashea” o muere el proceso del nabvegador y al volver a ingresar a la pagina, valida contra este localstorage que no se encuentra vacio y me alerta y redirige a la pantalla de fin sesión.

Sabes como evitar que al abrir recien el navegador se limpie el localstorage y se mantenga mientras no se “crashee” ? Gracias de antemano.

0
4Puntos

Buenos dias!
Ya lo probe y quiero hacerlo para un listado dinamicamente con php.
una luz ayuda a caminar al horizonte.
gracias

0
5247Puntos

Muy fina la explicación…