React Course: Using Web Storage

When developing a web application, it is very important to store and manage user data on the client side.
In this course, we will learn how to utilize web storage in a React application.
Web storage is implemented through two main methods, namely session storage and local storage.

What is Web Storage?

Web storage provides a way to store data on the client side.
It is a simple API provided by the browser, allowing data to be stored and read without requesting the server.
There are two main types of web storage.

  • Local Storage: Data is persistently stored even when the user is using the web application. The data remains even if the browser session ends.
  • Session Storage: Data is only maintained during the session of the browser tab or window. Closing the tab or exiting the browser will make the data disappear.

Using Web Storage in React

Using web storage in React is very easy. Here, we will illustrate how to use local storage and session storage with a simple example.

1. Using Local Storage

Let’s create a simple component that saves and retrieves data using local storage. 


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

const LocalStorageExample = () => {
    const [name, setName] = useState('');

    useEffect(() => {
        const storedName = localStorage.getItem('name');
        if (storedName) {
            setName(storedName);
        }
    }, []);

    const handleChange = (event) => {
        const newName = event.target.value;
        setName(newName);
        localStorage.setItem('name', newName);
    };

    return (
        

            
Local Storage Example

            
            
Stored Name: {name}

        

    );
};

export default LocalStorageExample;

In the code above, we receive the user’s name, store it in local storage, and retrieve the saved name when the page is reloaded.
We use the useEffect hook to read data from local storage when the component mounts.

2. Using Session Storage

Next, let’s create an example for saving and retrieving data using session storage. 


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

const SessionStorageExample = () => {
    const [sessionData, setSessionData] = useState('');

    useEffect(() => {
        const storedData = sessionStorage.getItem('sessionData');
        if (storedData) {
            setSessionData(storedData);
        }
    }, []);

    const handleChange = (event) => {
        const newData = event.target.value;
        setSessionData(newData);
        sessionStorage.setItem('sessionData', newData);
    };

    return (
        

            
Session Storage Example

            
            
Stored Data: {sessionData}

        

    );
};

export default SessionStorageExample;

In this example using session storage, the user’s input data can be maintained during the browser session.
The data is automatically deleted when the session ends. Such functionality is useful in cases like shopping cart and temporary storage.

Web Storage API

When dealing with web storage, the following API is used:

  • setItem(key, value): Stores a value for a specified key.
  • getItem(key): Returns the value for a specified key. Returns null if the key does not exist.
  • removeItem(key): Deletes the value stored for a specified key.
  • clear(): Deletes all stored data.
  • key(index): Returns the key at the specified index.
  • length: Returns the number of stored items.

Advantages and Disadvantages of Web Storage

Let’s look at the advantages and disadvantages of using web storage.

Advantages

  • Easy to Use: Web storage is very easy to use. You can store and read data without complex setup.
  • No Asynchronous Handling Needed: Data can be stored and retrieved immediately without server requests.
  • Throughput: Data reading and writing performance is excellent.

Disadvantages

  • Storage Capacity Limit: Local storage is limited to about 5MB per domain.
  • Security Issues: Caution is needed when storing sensitive information. Data stored on the client side can be easily accessed, so privacy should be protected.
  • Browser Dependency: The behavior of web storage may vary depending on the browser used by the user.

Use Cases of Web Storage

Web storage can be useful in various situations. Here are some common use cases.

  • User Preference Settings: You can store user-selected themes or language settings to provide the same environment during the next login.
  • Shopping Cart Feature: In online shopping malls, items added to the cart can be stored in local storage to retain data until the user checks out.
  • Temporary Storage: You can save data to local storage from user input forms to avoid losing data even if the user leaves the page.

Conclusion

Web storage is a useful tool for storing and managing data on the client side in React applications.
Through this course, you have learned the basic usage of local storage and session storage and explored various use cases.
Try to utilize web storage in your future projects!

References