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?

Answer 1

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");

Answer 2

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 ? (
    <></>):(<></>)}