Guardar JWT en localstorage

Autor: | Última modificación: 22 de noviembre de 2022 | Tiempo de Lectura: 3 minutos
Temas en este post:

El segmento Local Storage del navegador es un espacio de almacenamiento que nos permite guardar y conservar datos para que se mantengan a través de distintas sesiones del usuario. Uno de los datos más comunes para guardar es el JWT, un token de autenticación de usuario que nos permite identificarlo automáticamente. En este post, te enseñaremos cómo guardar JWT en localstorage para mejorar la experiencia de usuario a la hora de verificar su identidad.

¿Por qué guardar JWT en localstorage?

Como puedes leer en nuestro post sobre la persistencia de datos en el navegador, el método o espacio localstorage del navegador nos permite guardar datos que se preservan durante distintas sesiones hasta que decidamos borrarlos. Por esto, guardar JWT en localstorage es la mejor manera de mantener la sesión del usuario activa. Es decir, si el usuario cierra nuestra aplicación y vuelve a abrirla en cinco minutos, el JWT que nos permite reconocerlo seguirá activo y válido.

Lo anterior es fundamental para mejorar la experiencia de usuario, pues nos permite evitar que este tenga que iniciar sesión cada vez que cierra una pestaña o sale de la aplicación (algo que sucedería si guardáramos el token bajo sessionstorage).

¿Cómo guardar JWT en localstorage?

Para guardar JWT en localstorage debemos tener en cuenta que este tipo de almacenamiento solo guarda valores primitivos. Los tipos primitivos de JavaScript incluyen valores como strings, booleanos y number. Por ello, es fácil guardar JWT en localstorage, pues al final este token es tan solo un string largo.

Teniendo esto en cuenta, si en algún punto necesitas almacenar un dato como un array o un objeto que no sea primitivo, puedes convertirlo en un string con el método JSON.stringify. Luego, al sacar este elemento del localstorage, podrás volver a convertirlo a su formato original usando el método JSON.parse.

Lo primero que debemos hacer para guardar JWT en localstorage es definir qué pieza de nuestro proyecto se encargará de ejecutar esta acción. Esto es particularmente cierto cuando tenemos un proyecto que maneja alguna arquitectura de diseño, como sería el patrón modelo vista controlador. En ese caso, el modelo sería el encargado de guardar JWT en localstorage, pues es quien hace la gestión de los datos.

Ahora, para guardar nuestro JWT usaremos dos métodos nativos de la API de Local Storage: setItem y getItem. El método setItem será útil para guardar el token dentro del navegador usando un formato de clave/valor y el método getItem para obtener su valor a partir de la clave que le hemos dado.

Entonces, para ejecutar los métodos anteriores usamos el comando localStorage.método. A continuación, te mostramos cómo usamos el método setItem para guardar JWT en localstorage, suponiendo que nuestro JWT está guardado bajo la constante token:

localStorage.setItem (‘token’, token)

En la línea de código anterior, el primer parámetro es un string con el que nombramos la clave de nuestro JWT (que puede llamarse como queramos) y el segundo parámetro es una variable en la que hemos guardado el valor de nuestro JWT (en vez de copiar todo el string de código).

Para revisar el funcionamiento del comando anterior, te recomendamos ir al inspector de tu navegador e iniciar sesión en tu aplicación. Allí, podrás dirigirte a la sección application y local storage para ver cómo se crea tu token de acceso y se guarda un key ‘token’ y su value. Este conjunto se mantendrá allí a pesar de cerrar pestaña. Luego, si quieres consultar el value de este token bastará con que insertes el siguiente comando en cualquiera de las páginas de tu proyecto, pues hemos usado un método de persistencia de datos en el navegador.

localStorage.getItem (‘token’)

Una vez hayas logrado guardar JWT en localstorage, puedes decidir borrarlo cuando quieras para que no se quede allí para siempre. Esta es una acción que normalmente ejecutamos a partir del evento click de un botón de cerrar sesión o log out.

¿Qué sigue?

Ahora que sabes exactamente cómo guardar JWT en localstorage, ¡te invitamos a probarlo en tus propios proyectos! Para seguir aprendiendo sobre la creación y desarrollo de todo tipo de proyectos web, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un espacio de formación intensiva donde aprenderás muchas más acciones como esta, fundamentales para crear en la web. ¿Te animas a seguir formándote con nosotros para convertirte en un experto? ¡No te lo pierdas y pide información!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Trabajo? Aprende a programar y consíguelo.

¡No te pierdas la próxima edición del Aprende a Programar desde Cero Full Stack Jr. Bootcamp!

 

Prepárate en 4 meses, aprende las últimas tecnologías y consigue trabajo desde ya. 

 

Solo en España hay más de 120.400 puestos tech sin cubrir, y con un sueldo 11.000€ por encima de la media nacional. ¡Es tu momento!

 

🗓️ Próxima edición: 13 de febrero

 

Reserva tu plaza descubre las becas disponibles.

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!