How can I use session storage in React?

How can I use session storage in React?

You can use the sessionStorage API to store data for the duration of the page session. Would you like a code example?

Yes, please provide a code example.

Here's a simple example:

function App() {
  const [name, setName] = useState('');

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

  const handleChange = (e) => {
    setName(e.target.value);
    sessionStorage.setItem('name', e.target.value);
  };

  return (
    <input type='text' value={name} onChange={handleChange} />
  );
}

This code retrieves the name from session storage when the component mounts and updates it as the user types.

What happens to the data when I close the tab?

The data stored in sessionStorage is cleared when the tab or browser is closed. It's designed for temporary storage.

Can I use session storage for larger data?

sessionStorage can typically hold around 5MB of data, which is suitable for most temporary storage needs.