How To Get Data from localStorage in React JS

Introduction.

When building a React application, handling data storage is essential for maintaining a smooth and personalized user experience.

One of the most effective ways to do this is by using the browser's localStorage API.

Unlike cookies, which have size limitations and require extra management for security, localStorage provides a simple, persistent way to store key-value pairs directly in the browser.

It remains intact even after the page reloads or the browser is closed—making it a great choice for storing things like user preferences, authentication tokens, or even cart information in e-commerce apps.

In this post, I’ll walk through how to access and retrieve data from localStorage in a React app, and why this storage method can be a game-changer for managing state and improving your app's performance.

If you’ve ever found yourself needing to save data locally on the user's browser, localStorage is a simple yet powerful tool to consider.

What is localStorage?

Before jumping into the implementation, it's important to understand what localStorage is.

It's a part of the Web Storage API that allows you to store key-value pairs in a web browser.

Unlike sessionStorage, which stores data temporarily (until the browser tab is closed), localStorage stores data with no expiration time.

This makes it a great option for persisting user settings, preferences, and other data types that should persist between sessions.

How Do I Get Data from localStorage in React JS?

Managing data in modern web applications is critical, and one tool that has become increasingly useful in React apps is localStorage.

If you want to store and retrieve persistent data in your app, localStorage can be a great option.

It allows you to store data in the user's browser even after they refresh the page or close and reopen the browser. Let me guide you through how to access that data in a React app.

Here’s a step-by-step guide on how to get data from localStorage in a React app.

Step 1: Setting Data in localStorage.

First, let’s assume I want to store some data in localStorage. Before retrieving data, I need to have something stored.

I can save data to localStorage using the localStorage.setItem() method. This method takes two arguments: a key and a value.

localStorage.setItem('username', 'JohnDoe');

This will store the string 'JohnDoe' under the key 'username'.

Step 2: Retrieving Data in React.

Now, let’s move on to retrieving this data in a React component. To do this, I’ll use the localStorage.getItem() method.

This method takes a single argument, the key of the item I want to retrieve. Here’s a basic example:

const username = localStorage.getItem('username');
console.log(username); // Output: JohnDoe

However, since React follows a component-based architecture, it’s common to retrieve data from localStorage within functional or class components.

Using localStorage in Functional Components

In a functional component, React’s useEffect hook is a great tool for fetching data from localStorage when the component first loads. Here’s an example:

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

function UserProfile() {
  const [username, setUsername] = useState('');

  useEffect(() => {
    const storedUsername = localStorage.getItem('username');
    if (storedUsername) {
      setUsername(storedUsername);
    }
  }, []); // Empty array ensures this effect runs once on mount

  return (
    <div>
      <h1>Welcome, {username}</h1>
    </div>
  );
}

export default UserProfile;

In this example, the useEffect hook runs once when the component mounts, and I fetch the username from localStorage.

If a username is found, I update the state using setUsername, which will render the username on the screen.

Step 3: Handling localStorage Data as JSON.

localStorage only stores data as strings. So if I want to store an object, I need to convert it into a JSON string using JSON.stringify().

Likewise, when retrieving the data, I need to parse it back into an object using JSON.parse().

Here’s an example of storing and retrieving an object:

const user = {
  name: 'JohnDoe',
  age: 30
};

// Store the object in localStorage
localStorage.setItem('user', JSON.stringify(user));

// Retrieve the object from localStorage
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name); // Output: JohnDoe

In this case, the user object is converted into a string when storing it in localStorage, and then parsed back into an object when retrieving it.

Step 4: Error Handling and Edge Cases.

It’s important to consider some edge cases when working with localStorage.

For instance, the localStorage.getItem() method will return null if the key doesn’t exist. I should always check whether the data exists before trying to use it.

const storedUsername = localStorage.getItem('username');
if (storedUsername) {
  console.log('User exists:', storedUsername);
} else {
  console.log('No user found.');
}

Additionally, localStorage might not be available in all environments (such as server-side rendering in Next.js).

It’s important to ensure that the code only runs in the browser. Here's a basic example:

if (typeof window !== 'undefined') {
  const storedUsername = localStorage.getItem('username');
  // Safe to access localStorage here
}

Step 5: Removing Data from localStorage.

If I no longer need a piece of data, I can remove it from localStorage using the localStorage.removeItem() method:

localStorage.removeItem('username');

This will delete the 'username' key and its associated value.

Conclusion.

localStorage is a simple and effective way to store persistent data in React applications.

Whether you're saving user preferences, authentication tokens, or any other data that should persist between sessions, it’s a reliable tool that can greatly improve the user experience.

Just keep in mind that it has some limitations, like only storing strings and a maximum size limit of around 5MB depending on the browser.