8

Cómo usar LocalStorage con JavaScript y HTML5

745Puntos

hace 4 años

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"></script><script>/*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; 
    });   
});

</script></head><center><h1>Ejemplo - localStorage</h1><inputtype="text"placeholder="Nombre"id="nombretxt"><br><br><inputtype="text"placeholder="Apellido"id="apellidotxt"><br><br><buttonid="boton-guardar">Guardar</button><br><hr />
Nombre almacenado:
<labeltype="text"id="nombre"></label><br>                          
Apellido almacenado:
<label "text" id="apellido"></label><br><buttonid="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"></script><script>/*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; 
    });   
});

</script></head><center><h1>Ejemplo - sessionStorage</h1><inputtype="text"placeholder="Nombre"id="nombretxt"><br><br><inputtype="text"placeholder="Apellido"id="apellidotxt"><br><br><buttonid="boton-guardar">Guardar</button><br><hr />
Nombre almacenado:
<labeltype="text"id="nombre"></label><br>                          
Apellido almacenado:
<label "text" id="apellido"></label><br><buttonid="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.

Escribe tu comentario
+ 2
Ordenar por:
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.

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!
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
6625Puntos
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
3426Puntos

Muy fina la explicación…