Session Storage in React

The sessionStorage object is used much less often than localStorage.

Properties and methods are the same, but it’s much more limited. The sessionStorage exists only within the current browser tab. Another tab with the same page will have a different storage. But it is shared between iframes in the same tab from the same origin.

The data is still available on page refresh, but not closing and opening the tab. Let’s see that in action.

sessionStorage.setItem(\'userID\', 1001);

Now data is stored in session storage. To get stored data from storage, use getItem method.

alert( sessionStorage.getItem(\'userID\') );

But if you open the same page in another tab, and try again there, the code above returns null, meaning “nothing found”.

That’s exactly because sessionStorage is bound not only to the origin, but also to the browser tab. For that reason, sessionStorage is used sparingly.

//setter
sessionStorage.setItem(\'userID\', 1001); 

//getter
sessionStorage.getItem(\'userID\'); 

//remove
sessionStorage.removeItem(\'userID\'); 

// remove all
sessionStorage.clear();

SESSION STORAGE IN REACT

Let\’s approach the session storage in React by example.

We have a function component which uses React Hooks to manage the state of an input field and the state output is shown with paragraph tag.

import React from \'react\';
 
const App = () => {
  const [userName, setUserName] = React.useState(\'\');
 
  const onChange = event => setUserName(event.target.value);
 
  return (
    <div>
      <h1>Hello React with Session Storage!</h1>
 
      <input value={userName} type=\"text\" onChange={onChange} />
 
      <p>{userName}</p>
    </div>
  );
};
 
export default App;

If you type something into the input field, it\’ll be shown in the paragraph. However, the state is lost once you refresh the browser tab. A simple solution would be to use session storage. However, using the session storage in function components is a side-effect. We can implement it with the useEffect hook which runs every time the value property changes.

import React from \'react\';
 
const App = () => {
  const [userName, setUserName] = React.useState(\'\');
 
  React.useEffect(() => {
    sessionStorage.setItem(\'userName\', userName);
  }, [userName]);
  
  const onChange = event => setUserName(event.target.value);
 
  return (
    <div>
      <h1>Hello React with Session Storage!</h1>
 
      <input value={userName} type=\"text\" onChange={onChange} />
 
      <p>{userName}</p>
    </div>
  );
};
 
export default App;

Currently, we only store the value and never retrieve it. Let\’s add this behavior in the next step.

import React from \'react\';
 
const App = () => {
  
  const [userName, setUserName] = React.useState(
    sessionStorage.getItem(\'userName\') || \'\'
  );
 
  React.useEffect(() => {
    sessionStorage.setItem(\'userName\', userName);
  }, [userName]);
  
  const onChange = event =>	setUserName(event.target.value);
 
  return (
    <div>
      <h1>Hello React with Session Storage!</h1>
 
      <input value={userName} type=\"text\" onChange={onChange} />
 
      <p>{userName}</p>
    </div>
  );
};
 
export default App;

EXPIRATION WITH SESSION STORAGE

Sometimes you want to cache/persist data only in your current browser session, such as user session object after user logs in. After closing the browser, you want clear the cache; but when you refresh the browser tab, you want to keep the cache intact. That\’s where you can use the native sessionStorage instead of the localStorage. The session storage is used in the same way as the local storage.