Close

Javascript: Ejemplo Como usar LocalStorage y SessionStorage

Hoy vengo a enseñarles como nosotros podemos manipular un objeto  sessionstorage y localstorage que son objetos nativos de JavaScript, Puedes encontrar información más detallada en : https://developer.mozilla.org/es/docs/DOM/Almacenamiento

Solo mostrare una forma que en lo personal se me hizo muy practica al momento de interactuar información guardada en sesiones del lado del cliente, en pocas palabras es como si manejaramos variables $_SESSION de PHP pero desde el lado del cliente con Javascript.

Nuestro escenario sera el siguiente: 

Les Quise preparar el ejemplo sobre como lo usaríamos con un login, obviamente esto esta mal ya que no es para nada seguro pero bueno fue con lo que se me hizo más claro explicar.

Nuestro proyecto lo tenemos de la siguiente manera :

arbol_login_sessionStorage_localStorage_desarrollohidrocalido

Le agregue Bootstrap 3 para darle un poco más de presentación.

Nuestro index.html

principal.html

Nuestro main.js

Pueden ver el ejemplo funcionar aqui

Si lo observamos por pasos podemos ver que si abrimos la consola del Chrome en Resourse nos aparecen los datos almacenados en los objetos LocalStorage y SessionStorage

image1_login_sessionStorage_localStorage_desarrollohidrocalido

Aquí vemos lo almacenado en SessionStorage que es nuestro Usuario
image2_login_sessionStorage_localStorage_desarrollohidrocalidoAquí vemos lo almacenado en nuestro LocalStorage que es nuestra contraseña

image3_login_sessionStorage_localStorage_desarrollohidrocalido

 

 

Conclusión : Son una forma muy útil de almacenar nuestros datos del lado del cliente, pero esto no es muy seguro, en lo personal yo solo llego a guardar información poco útil que requiera pasar de una pantalla a otra cuando no llego a manejar AJAX ya que si quisiera manipular otra información que si sea importante mejor usaría variables de session en PHP.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.