Initializing and using `sessionStorage` in React

Question

I'm currently trying to save an item into sessionStorage before rendering occurs.

My code is something like this:

 componentWillMount() { sessionStorage.setItem("isUserLogged", false); }

However, it says that "sessionStorage is not defined." How do I use sessionStorage in React before rendering occurs?

@Kartik_Agarwal Just tried that, its now showing window is not defined — Joshua Rajandiran
– Joshua Rajandiran, Commented Nov 3, 2016 at 11:11
After rendering, I would be able to set my sessionStorage but I want to do it before rendering occurs. — Joshua Rajandiran
– Joshua Rajandiran, Commented Nov 3, 2016 at 11:20

mleko · Accepted Answer · 2017-01-25 15:18:53Z

56

SessionStorage is not available when using server side rendering (you can mock it but data won't be available to user).

It's available only in browser https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage

Example of writing to storage

window.sessionStorage.setItem("key", "value");

To retrieve item from storage use

window.sessionStorage.getItem("key");

answered Jan 25, 2017 at 15:18

mleko

12.3k7 gold badges53 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Joshua Rajandiran Over a year ago

This is an old question, but can you point out that sessionStorage will work when the component has mounted. That is the moment where sessionStorage will be defined.

engineerDave Over a year ago

The answer is correct that it's only available on the client side. However, to properly answer the above question, IMO the answer should indicate that you can leverage this in componentDidMount ... which happens after React component is fully client side. the pattern you'd use is initialize an state variable with a default setting and then update it with the session information once component is mounted.

Gabriel Panegrossi Santos · Accepted Answer · 2021-12-13 12:27:48Z

I was using next and used react effect to solve the problem, solved like this:

import React from 'react'; function Cookies() { const [accepted, setAccepted] = React.useState(false); React.useEffect(() => { if (window.sessionStorage.getItem('cookies')) { setAccepted(true); } }, []); function acceptPolicy() { sessionStorage.setItem('cookies', true); setAccepted(true); } return !accepted ? ( <></>):(<></>)}

Pratikshit · Accepted Answer · 2020-09-29 08:30:35Z

The read-only sessionStorage property accesses a session Storage object for the current origin. sessionStorage is similar to localStorage; the difference is that while data in localStorage doesn't expire, data in sessionStorage is cleared when the page session ends.

Collectives™ on Stack Overflow

Initializing and using `sessionStorage` in React

3 Answers 3

2 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Linked

Related