Local Storage is a Web API native to modern web browsers. It allows websites/apps to store data (simple and limited) in the browser, making that data available in future browser sessions.
Before diving into the tutorial, it may be unclear why you’d want to even use Local Storage in your React apps.
There’s plenty of reasons and use cases, more than I can imagine, but here’s a few I’ve discovered.
stateto be able to work on particular styling and functionality, (e.g. styling a list of items and removing items requires items). Rather than recreating an app’s state on every refresh, Local Storage can persist that state, making development much more efficient and enjoyable.
Create a new React project using create-react-app.
npx create-react-app local-storage
cd into the new directory and fire up the app. Install yarn if you haven’t already.
App.js with the code below. Here, we’re setting up a simple to-do list app. Absolutely nothing fancy, but it’ll do the trick for playing with
After copying over this code, you should be able to add to-do items to the list and remove them.
Saving the value of our
newItem input to
localStorage is a piece of cake.
updateInput() method, we’ll invoke the
[localStorage.setItem()](https://developer.mozilla.org/en-US/docs/Web/API/Storage/setItem) method, which takes two arguments:
key: string— the name of the localStorage item
value: string— the value you want to save for the given localStorage
key. Note: Even arrays and objects need to be saved as strings. More on that in a bit.
Here’s our new
As you can see, it’s not much different from updating React
Open up the Web Developer tools in your browser of choice, find the section for Web Storage (“Application” tab in Chrome), select the current domain of
localhost:3000 and watch the value for the
newItem key stay in sync with your app’s input.
When adding an item, we save the new, updated
localStorage and reset the
newItem input to a blank string.
No surprises here, except for the use of
localStorage can only store strings, arrays and objects need to be passed into
**JSON.stringify()** before being passed to
Before moving on, we’ll also want to update the list in
localStorage when deleting an item.
App reverts back to its initial state! We aren’t using the stored items yet, just saving them in the background. Not terribly helpful…
In order to persist the app’s
state even after refreshing the page, we need to hydrate the
App‘s state with the values in
localStorage, with help from a couple new methods:
[localStorage.getItem()](https://developer.mozilla.org/en-US/docs/Web/API/Storage/getItem)— takes a storage
keyand returns the value saved under that key.
The below method hydrates the app’s state with the values saved to
localStorage. Add this new method to your
It makes sense to hydrate
state when the page loads, i.e. early on in the component lifecycle. So let’s invoke this function in
Once you’ve added the above code to your
App component, refreshing the page no longer resets the app, but keeps it in sync with
While our app works as-is by saving React
localStorage every time the user makes an update, we don’t really need to save so frequently.
Why? Because React keeps track of the
state of the app throughout the user’s session — that’s what it’s for! Also, with more complex components and states, it’ll be quite cumbersome and repetitive to use
localStorage.setItem() wherever the
state is updated.
So rather than continuously keeping
localStorage in-sync with React
state, let’s simply save
localStorage whenever the user ends their session, either by leaving the app (‘unmounting’ the component) or refreshing the page.
Appcomponent mounts and hydrates its
statewith any applicable
statethroughout the user’s session.
stateis at that time to
localStorage, making it available for hydrating in the next session.
Alright, here’s a new method for saving all of
localStorage at once. Add it to your
In order to save
localStorage when the user leaves the app, we need to invoke the
saveStateToLocalStorage method in
**componentWillUnmount** does not fire when the user refreshes or leaves the page, so we need to utilize the
[**window.onbeforeunload**](https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload) event to be able to save to
**localStorage**. Learn more here.
Here’s some updated code, where we add the event listener to
componentDidMount as well as add what we need to
We no longer need to
setItem when updating React
state, so you’ll want to remove those.
A lot has changed since the beginning of the tutorial, so here’s the
App.js file at this point. *Nothing in the
_render()_ method has changed.*
And that’s it! You now have the tools to use Local Storage in your React projects.
I found myself at work wanting to take advantage of Local Storage in tons of different components, so I created a component, react-simple-storage, that handles everything we’ve just implemented and much more. Keep following along to see how easy it is to use in our little to-do app.
yarn add react-simple-storage
That’s it! You don’t need all of the extra methods and event listeners from the tutorial, so the final
App.js using react-simple-storage looks like this…