Using LocalStorage With a React/Redux App

I have finally completed my final project for Flatiron School’s Software Engineering Bootcamp! For the final project I built an art marketplace/e-commerce app where users can either publicly browse art work to buy from independent sellers, or sign up and post their art work to sell on the site. I used a Rails backend API that held all the user and “art_post” data in that database, and built out the frontend for the app using React and Redux.

When thinking about user auth I wanted to implement using JWT’s(JSON Web Tokens) to be able to log users in. I set up the backend to issue a token whenever a user created a new account or logged back in, but needed a way to manage the token more easily on the frontend. Behold localStorage.

LocalStorage

When trying to solve this issue of handling the JWT on the frontend in a more effective way, I discovered localStorage. LocalStorage simply stores whatever data you want in your browser. This allows for some easy data management that persists, but doesn’t have to deal with your database.

**NOTE: Being that this is your browser it’ll only work with strings, so if you want to handle more complex data structures like arrays and/or objects you’ll need to use JSON.stringify() and JSON.parse() respectively.**

Implementing LocalStorage: setItem

The best part about localStorage is how easy it is to implement into your app. All you need to do is set what you want to store:

localStorage.setItem('variable', data)

First you pass in however you want to refer to what your storing. Then you pass in the data you actually want to store. That’s it. Now you have that piece of data stored, and a way to refer to it’s contents. If you want to store multiple pieces of data you just repeat the step:

localStorage.setItem('variable', data)
localStorage.setItem('variable2', data2)
localStorage.setItem('variable3', data3)

And now you have three different pieces of data stored in your browser.

You can easily check what’s stored in the browser by clicking on inspect, opening up the application tab, and clicking on Local Storage

Implementing LocalStorage: getItem

Once you have whatever data you want stored in the browser you can retrieve it from wherever you want just as easily as setting it.

const data = localStorage.getItem('variable')

Now you have that data whenever and wherever you might need it.

How I Used It

In my project I wanted to be able to hold onto the JWT that was coming from my backend whenever a user signed up or logged in. I had two different fetch requests, one going to a /users route through a users_controller for signup, and one going to a /login route through an auth_controller for login. For each fetch I was getting back a JWT in the response, so I grabbed that along with the user_id and saved it into localStorage.

Now with each fetch I would have a users JWT and their id to be able to associate the two together.

Once the fetch runs we are passing the data on to the reducer to populate the Redux store. Inside the reducer I simply grab that user data that I need, and add it into my store for use throughout my app.

Additionally to ensure one level of security, on initial page load I fetch all users, then map over them and only assign the userLogin to the user whose id matches the userId coming from localStorage. Then that user has their associated JWT in the Redux store.

Now throughout my app I can simply check which user currently has an associated userLogin and I can assign them as a “currentUser” and manage their functionality based on that. Here’s an example from my NavBar component where only currentUser’s can see the link to the create form:

Bringing It All Together

While localStorage is not a replacement for communicating with your backend and persisting to a database, it’s a nice little tool to have more flexibility to manage data on your frontend. It’s super easy to use, and provides a nice quick fix for a range of situations.