Session Storage React: How to Save Data in Your App

How do you keep data safe during a single session in React?

Managing data in a React app can be tricky, especially when handling temporary information. This is where session storage comes in handy. It stores data for as long as the page is open, helping you manage user interactions without cluttering local storage or state.

This blog walks you through using session storage React effectively. You’ll learn how it works, see practical examples, and get best practices to keep your app fast and responsive.

Let’s get started!

Understanding Session Storage

What is Session Storage?

Session storage is a web storage API that allows you to store data in the browser for the duration of a page session. Unlike local storage, which persists data even after the browser is closed, session storage clears the stored data once the session ends. This makes it ideal for temporary data that doesn't need to persist beyond the current browser tab or page session.

Key Features of Session Storage

• Scope: Data stored in session storage is limited to the browser tab or window. Opening a new tab creates a separate page session with its storage.

• Lifetime: The session lasts as long as the tab or window remains open. Once the session ends, the stored data is automatically cleared.

• Storage Capacity: Session storage can typically hold around 5MB of data, suitable for key value pairs and small objects.

• Synchronous Access: Operations on session storage are synchronous, ensuring immediate availability of data.

Working with Session Storage in React

Integrating session storage into your React application involves several key operations: storing data, retrieving data, removing data, and clearing session storage.

Storing Data

To write data to session storage, use the setItem method of the session storage object. This method takes a key and a value as parameters, allowing you to effectively store key-value pairs.

1// Storing user information in session storage
2const user = { name: 'John Doe', email: 'john.doe@example.com' };
3sessionStorage.setItem('user', JSON.stringify(user));

​

Retrieving Data

To retrieve data, use the getItem method. This method fetches the value associated with a given key, enabling you to access previously stored data.

1// Retrieving user information from session storage
2const storedUser = JSON.parse(sessionStorage.getItem('user'));
3console.log(storedUser.name); // Outputs: John Doe

​

Removing Data

If you need to remove specific stored data, the removeItem method is your go-to solution. It deletes the value associated with a particular key.

1// Removing user information from session storage
2sessionStorage.removeItem('user');

​

Clearing Session Storage

To clear all data stored in session storage, use the clear method. This method removes all key value pairs, effectively resetting the session storage.

1// Clearing all data from session storage
2sessionStorage.clear();

​

Implementing Session Storage in React Components

Integrating session storage within your React components ensures that stored data persists across different parts of your application during a page session.

Using sessionStorage in React Components

React components can interact with session storage using lifecycle methods or hooks like useEffect. This allows you to write data, retrieve data, and manage the component's initial state based on the stored data.

1import React, { useState, useEffect } from 'react';
2
3const UserProfile = () => {
4  const [user, setUser] = useState(null);
5
6  // Retrieve data when the component mounts
7  useEffect(() => {
8    const storedUser = JSON.parse(sessionStorage.getItem('user'));
9    if (storedUser) {
10      setUser(storedUser);
11    }
12  }, []);
13
14  // Function to update user data
15  const updateUser = (newUser) => {
16    setUser(newUser);
17    sessionStorage.setItem('user', JSON.stringify(newUser));
18  };
19
20  return (
21    <div>
22      {user ? (
23        <h1>Welcome, {user.name}</h1>
24      ) : (
25        <h1>No user data available.</h1>
26      )}
27      {/* Additional component logic */}
28    </div>
29  );
30};
31
32export default UserProfile;

​

Example: Managing User Data

Consider a scenario where you need to manage user authentication status across different components. Using session storage, you can store the user's login status and retrieve it as needed.

1// Storing login status
2sessionStorage.setItem('isLoggedIn', 'true');
3
4// Retrieving login status
5const isLoggedIn = sessionStorage.getItem('isLoggedIn') === 'true';
6
7// Removing login status
8sessionStorage.removeItem('isLoggedIn');

​

Best Practices for Using Session Storage

Adhering to best practices ensures that you use session storage effectively and securely within your React applications.

• Handling Data Consistency: Ensure that the data stored in session storage remains consistent across different components. Implement mechanisms to synchronize stored data with the component's state to prevent discrepancies.

• Security Considerations: Avoid storing sensitive information in session storage, as it can be accessed by JavaScript running on the same domain. For sensitive data, consider using more secure storage solutions or server-side sessions.

Common Pitfalls and How to Avoid Them

While session storage is a powerful tool, it's essential to be aware of common mistakes to avoid potential issues.

• Exceeding Storage Limits: Be mindful of the storage capacity. Avoid storing large amounts of data, which can lead to errors.

• Data Serialization: Always serialize complex data structures before storing them. Use JSON.stringify for objects and arrays.

• Browser Compatibility: Although widely supported, always check for browser compatibility when using session storage.

The Bottom Line!

Effectively managing stored data is vital for creating dynamic and responsive React applications. Session storage provides a straightforward method for handling temporary data within a page session, offering a balance between accessibility and lifespan. By understanding how to write data, retrieve data, and manage key-value pairs, you can enhance your React components' functionality and ensure a seamless user experience. Incorporating session storage into your React projects not only optimizes state management but also contributes to building scalable and maintainable applications.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.