How can I use session storage in a React application?

How can I use session storage in a React application?

You can use the sessionStorage API to store data for the duration of the page session. In React, you can access it using window.sessionStorage.

Can you show me a code example?

Sure! Here's a simple example:

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

  const saveName = () => {
    sessionStorage.setItem('name', name);
  };

  const loadName = () => {
    const storedName = sessionStorage.getItem('name');
    if (storedName) {
      setName(storedName);
    }
  };

  useEffect(() => {
    loadName();
  }, []);

  return (
    <div>
      <input value={name} onChange={(e) => setName(e.target.value)} />
      <button onClick={saveName}>Save Name</button>
    </div>
  );
}

This saves the name to session storage when you click the button.

What happens to the data when I close the tab?

The data stored in sessionStorage is cleared when the page session ends, which typically happens when the tab or browser is closed.