El segmento localstorage 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 localstorage: 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 aplicaciones web. ¿Te animas a seguir formándote con nosotros para convertirte en un experto? ¡No te lo pierdas y pide información!
