Utilizing Session Storage in React.js

Session storage is a web storage API that allows you to store key-value pairs locally in a user’s browser session. This means that the data stored in session storage will persist as long as the browser tab is open, and will be cleared once the tab is closed. In this tutorial, we will explore how to use session storage in a React application.

Step 1: Set up a React project
First, you need to set up a new React project. You can do this by running the following command in your terminal:

npx create-react-app session-storage-tutorial

This will create a new React project called session-storage-tutorial. Navigate to the project directory by running:

cd session-storage-tutorial

Step 2: Create a new component
Next, create a new component called SessionStorageExample.js in the src directory. This component will contain the logic for using session storage in your React application.

import React, { useEffect, useState } from 'react';

const SessionStorageExample = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // Retrieve count from session storage
    const savedCount = sessionStorage.getItem('count');
    if (savedCount) {
      setCount(parseInt(savedCount));
    }
  }, []);

  const incrementCount = () => {
    const newCount = count + 1;
    setCount(newCount);
    // Save count to session storage
    sessionStorage.setItem('count', newCount);
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={incrementCount}>Increment</button>
    </div>
  );
};

export default SessionStorageExample;

In this component, we are using the useState hook to store the count value, and the useEffect hook to retrieve the count value from session storage when the component mounts. We use the sessionStorage.getItem method to retrieve the count value, and the sessionStorage.setItem method to save the count value to session storage when it changes.

Step 3: Render the component
Now, you can render the SessionStorageExample component in the App.js file:

import React from 'react';
import SessionStorageExample from './SessionStorageExample';

const App = () => {
  return (
    <div>
      <h1>Session Storage Example</h1>
      <SessionStorageExample />
    </div>
  );
};

export default App;

Step 4: Run the React application
You can now run the React application by running the following command in the terminal:

npm start

This will start the development server and open the application in your browser. You should see the Session Storage Example header and a count value with an Increment button. Clicking the button will increment the count value, and the value will persist in session storage even if you close the browser tab.

In conclusion, using session storage in a React application is a powerful way to store data locally in a user’s browser session. By following the steps outlined in this tutorial, you can easily implement session storage in your React application and persist data across sessions.