10

C贸mo usar LocalStorage con JavaScript y HTML5

756Puntos

hace 4 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.
  • Prueba un mes de Platzi a un precio especial y suspende cuando quieres 馃憞
    banner_navidad

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 鈥渃argar 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:
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.

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
8213Puntos
7 meses

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
8213Puntos

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

1
2960Puntos

wow muchas gracias por la informaci贸n

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 鈥渃rashea鈥 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 鈥渃rashee鈥 ? Gracias de antemano.

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
6827Puntos
2 a帽os

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

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
3437Puntos

Muy fina la explicaci贸n鈥