And why you ought to. 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. Local Storage 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. 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. A simple, fake backend for your frontend React projects — When working on an app, it’s often useful or necessary for the app to have a certain to be able to work on particular styling and functionality, (e.g. styling a list of items and removing items ). Rather than recreating an app’s state on every refresh, Local Storage can persist that state, making development more efficient and enjoyable. Experiment with different states while developing — state requires items much what do people hate more than filling out a form? Saving form data across sessions — Filling out a form twice! Getting Started Create a new React project using . create-react-app npx create-react-app local-storage into the new directory and fire up the app. if you haven’t already. cd Install yarn yarn start Update your 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 . App.js 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 input to is a piece of cake. newItem localStorage In the method, we’ll invoke the method, which takes two arguments: updateInput() [localStorage.setItem()](https://developer.mozilla.org/en-US/docs/Web/API/Storage/setItem) — the name of the localStorage item key: string — the value you want to save for the given localStorage . Even arrays and objects need to be saved as strings. value: string key Note: More on that in a bit. Here’s our new method. updateInput() 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 and watch the value for the key stay in sync with your app’s input. localhost:3000 newItem Now, let’s save the list of to-do items When adding an item, we save the new, updated to and reset the input to a blank string. list localStorage newItem No surprises here, except for the use of . This method converts a JavaScript value into a JSON string. [JSON.stringify()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) Because can only store strings, localStorage 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 when deleting an item. localStorage Ok, we’re saving. But watch what happens when you refresh the page… …the reverts back to its initial state! We aren’t using the stored items yet, just saving them in the background. Not terribly helpful… App In order to persist the app’s even after refreshing the page, we need to the ‘s state with the values in , with help from a couple new methods: state hydrate App localStorage — takes a storage and returns the value saved under that key. [localStorage.getItem()](https://developer.mozilla.org/en-US/docs/Web/API/Storage/getItem) key — converts a JSON string into a JavaScript value. You need this to correctly retrieve objects and arrays that were saved as strings to . [JSON.parse()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse) localStorage The below method hydrates the app’s state with the values saved to . Add this new method to your component. localStorage App It makes sense to hydrate when the page loads, i.e. early on in the . So let’s invoke this function in . state component lifecycle componentDidMount() Once you’ve added the above code to your component, refreshing the page no longer resets the app, but keeps it in sync with ! App localStorage Continuously saving is unnecessary — there’s a better way. While our app works as-is by saving React to every time the user makes an update, we don’t really need to save so frequently. state localStorage Why? Because React keeps track of the 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 wherever the is updated. state localStorage.setItem() state So rather than continuously keeping in-sync with React , let’s simply save to whenever the user ends their session, either by leaving the app (‘unmounting’ the component) or refreshing the page. localStorage state state localStorage The new sequence of events/operations will be… The user visits the app (localhost:3000 in our case) The component mounts and hydrates its with any applicable values. App state localStorage React will update throughout the user’s session. state _localStorage_ won’t change. When the user ends their session, save whatever the is at that time to , making it available for hydrating in the next session. state localStorage Alright, here’s a new method for saving all of to at once. Add it to your component. state localStorage App In order to save to when the user leaves the app, we need to invoke the method in . state localStorage saveStateToLocalStorage 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. Here’s some updated code, where we add the event listener to as well as add what we need to . componentDidMount componentWillUnmount We no longer need to when updating React , so you’ll want to remove those. setItem state A lot has changed since the beginning of the tutorial, so here’s the file at this point. * App.js 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 _Simple component and helper functions for using localStorage with React._www.npmjs.com 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, , 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. react-simple-storage 1. Install it yarn add react-simple-storage 2. Import it into App.js 3. Include it in your <App> component, like this… You don’t need all of the extra methods and event listeners from the tutorial, so the final using looks like this… That’s it! App.js react-simple-storage _react-simple-storage - Simple component and helper functions for using localStorage with React._github.com ryanjyost/react-simple-storage

Facebook

Mozilla

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

How to take advantage of Local Storage in your React projects

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Ryan J. Yost

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How to take advantage of Local Storage in your React projects

Too Long; Didn't Read

People Mentioned

Companies Mentioned

Ryan J. Yost

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES