Unlocking the Power of Local Storage in React
The Basics of Local Storage
Local storage is a mechanism that allows users to save data as key-value pairs in the browser for later use. Unlike session storage, which persists data only as long as the current browser tab is running, local storage does not clear data when the browser closes. This makes it ideal for persisting data not bound to the current browser tab.
Using Local Storage with React Hooks
To follow this guide, you’ll need a basic understanding of React and React Hooks, as well as Node.js installed on your computer. We’ll cover how to use local storage to persist a user’s form input in the browser storage using React Hooks.
Setting Up the Project
Let’s start by creating a new React project. Run the following command in your terminal:
npx create-react-app localstorage-react-hook-project
Once the project folder is generated, open it with a code editor and start the development server by running npm start. The project should launch in the browser at http://localhost:3000/.
Creating a React Form Component
Next, let’s create a React form component. In the src folder, delete all the files and create an index.js file. Add the following code to index.js:
“`jsx
import React from ‘eact’;
import ‘./App.css’;
import App from ‘./App’;
function index() {
return
}
export default index;
“
Then, create anfile and aForm1.jsfile. TheApp.jsfile will be the root and parent component, whileForm1.js` will hold the form inputs.
Saving Form Input Data in Local Storage
To store the form input data in local storage, we’ll use the setItem() method. This method takes a key-value pair as an argument, where the key is a string and the value can be any data type. Since local storage only accepts string data types, we’ll use JSON.stringify() to convert objects and arrays to JSON strings.
Using the useEffect Hook to Perform Side Effects
We can also use the useEffect Hook to perform side effects, such as storing data in local storage. This makes the Hook a perfect place to call the setItem method.
Reading Data from Local Storage
On an initial page load, instead of assigning an empty string to the state variable, we must assign a function that accesses local storage, retrieves the saved value, and uses that value as the default.
Creating a Custom React Hook to Persist Form Inputs
Sometimes we might want to render and persist more form inputs in a different component. Instead of copying the logic from one component to another, we can extract and share similar logic between components using custom Hooks.
Extracting the Local Storage Logic
Let’s create a custom Hook called useLocalStorage. This Hook will expect two arguments: the key and the default value.
Using the useLocalStorage Custom Hook
Now that we have our custom Hook, let’s use it in our Form1 component.
Common Pitfalls and Solutions
When working with local storage, there are some common pitfalls to avoid.
The “Local Storage is Not Defined” Error
This error occurs because local storage is a browser-specific Web Storage API. To fix it, we can check whether the window object is defined before accessing local storage.
How to Clear Local Storage in React
There are two main ways to clear local storage in React: using the localStorage.clear() method and the localStorage.removeItem() method.
Frequently Asked Questions
How Do I Create a Custom Hook for Local Storage?
Custom hooks are not a typical first option for local storage. However, they have their use cases and advantages. In this example, we’ve created a custom hook called useLocalStorage that allows storing and retrieving data from the browser’s local storage using React’s useState and useEffect Hooks.
How Do I Fetch Data from Local Storage in React?
Fetching data from local storage can be done using the getItem() method.
What is the Difference Between Session Storage and Local Storage in React?
Session storage persists data only as long as the current browser tab is running, while local storage does not clear data when the browser closes.
By following this guide, you’ve learned how to use local storage to persist data in a browser using React Hooks. You’ve also learned how to create a custom Hook to extract component logic into reusable functions.