And why you ought to.
---------------------

![](https://hackernoon.com/hn-images/1*To2H39eauxaeYxYMtV1afQ.png)

[Local Storage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) 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.

*   **A simple, fake backend for your frontend React projects —** It’s often nice to add the appearance of a backend/database to your frontend portfolio projects. The extra functionality will take your app to the next level, improve the user experience and impress potential employers.
*   **Experiment with different states while developing —** When working on an app, it’s often useful or necessary for the app to have a certain `state` to 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.
*   **Saving form data across sessions —** what do people hate more than filling out a form? **Filling out a form twice!**

### Getting Started

Create a new React project using [create-react-app](https://github.com/facebook/create-react-app).

    npx create-react-app local-storage

`cd` into the new directory and fire up the app. [Install yarn](https://www.npmjs.com/package/yarn) if you haven’t already.

yarn start

Update your `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 `localStorage`.

After copying over this code, you should be able to add to-do items to the list and remove them.

### Start saving things to localStorage

Saving the value of our `newItem` input to `localStorage` is a piece of cake.

In the `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 `updateInput()` method.

As you can see, it’s not much different from updating React `state`.

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.

#### Now, let’s save the list of to-do items

When adding an item, we save the new, updated `list` to `localStorage` and reset the `newItem` input to a blank string.

No surprises here, except for the use of `[JSON.stringify()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify)`. This method converts a JavaScript value into a JSON string.

Because `localStorage` can only store strings, **arrays and objects need to be passed into** `**JSON.stringify()**` **before being passed to** `**setItem()**`**.**

Before moving on, we’ll also want to update the list in `localStorage` when deleting an item.

### Ok, we’re saving. But watch what happens when you refresh the page…

…the `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 `key` and returns the value saved under that key.
*   `[JSON.parse()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse)` — converts a JSON string into a JavaScript value. You need this to correctly retrieve objects and arrays that were saved as strings to `localStorage`.

The below method hydrates the app’s state with the values saved to `localStorage`. Add this new method to your `App` component.

It makes sense to hydrate `state` when the page loads, i.e. early on in the [component lifecycle](https://reactjs.org/docs/state-and-lifecycle.html). So let’s invoke this function in `componentDidMount()`.

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 `localStorage`!

### Continuously saving is unnecessary — there’s a better way.

While our app works as-is by saving React `state` to `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 `state` to `localStorage` whenever the user ends their session, either by leaving the app (‘unmounting’ the component) or refreshing the page.

#### The new sequence of events/operations will be…

1.  The user visits the app (localhost:3000 in our case)
2.  The `App` component mounts and hydrates its `state` with any applicable `localStorage` values.
3.  React will update `state` throughout the user’s session. `_localStorage_` _won’t change._
4.  When the user ends their session, save whatever the `state` is at that time to `localStorage`, making it available for hydrating in the next session.

Alright, here’s a new method for saving all of `state` to `localStorage` at once. Add it to your `App` component.

In order to save `state` to `localStorage` when the user leaves the app, we need to invoke the `saveStateToLocalStorage` method in `componentWillUnmount`.

**CAVEAT —** `**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.**](https://stackoverflow.com/questions/39084924/componentwillunmount-not-being-called-when-refreshing-the-current-page)

Here’s some updated code, where we add the event listener to `componentDidMount` as well as add what we need to `componentWillUnmount`.

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.

### React Simple Storage — an almost shameless plug

[**react-simple-storage**  
_Simple component and helper functions for using localStorage with React._www.npmjs.com](https://www.npmjs.com/package/react-simple-storage "https://www.npmjs.com/package/react-simple-storage")[](https://www.npmjs.com/package/react-simple-storage)

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**](https://github.com/ryanjyost/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.

#### 1\. Install it

    yarn add react-simple-storage

#### 2\. Import it into App.js

#### 3\. Include it in your <App> component, like this…

**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](https://github.com/ryanjyost/react-simple-storage) looks like this…

[**ryanjyost/react-simple-storage**  
_react-simple-storage - Simple component and helper functions for using localStorage with React._github.com](https://github.com/ryanjyost/react-simple-storage "https://github.com/ryanjyost/react-simple-storage")[](https://github.com/ryanjyost/react-simple-storage)

How to take advantage of Local Storage in your React projects

Too Long; Didn't Read

People Mentioned

Companies Mentioned

@ryanjyost

RELATED STORIES