Initializing and Using `Sessionstorage` in React
I'm Currently Trying to Save an Item into sessionStorage Before Rendering Occurs. My Code Is Something Like This: componentWillMount() { sessionStorage...
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?
3 Answers
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
Example of writing to storage
window.sessionStorage.setItem("key", "value");
To retrieve item from storage use
window.sessionStorage.getItem("key");
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 ? (
<></>):(<></>)}
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.
Sophia analyzes international trade, startup ecosystems, retail transformation, and supply chain logistics for modern digital publications.
