How to persist state with sessionStorage in React
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Using sessionStorage for state persistence is ideal when you need temporary data storage that clears when the browser tab closes. As the creator of CoreUI with extensive React development experience since 2014, I’ve used sessionStorage for form data, wizard steps, and temporary user preferences. The implementation is nearly identical to localStorage but provides session-scoped persistence instead of permanent storage. This approach is perfect for sensitive data or temporary application state that shouldn’t persist indefinitely.
Use useEffect with sessionStorage to persist state temporarily within the current browser session.
import { useState, useEffect } from 'react'
function FormWizard() {
const [step, setStep] = useState(() => {
const saved = sessionStorage.getItem('wizardStep')
return saved ? parseInt(saved, 10) : 1
})
useEffect(() => {
sessionStorage.setItem('wizardStep', step.toString())
}, [step])
return (
<div>
<p>Current Step: {step}</p>
<button onClick={() => setStep(step + 1)}>
Next Step
</button>
</div>
)
}
This code persists the wizard step using sessionStorage, which automatically clears when the browser tab is closed. The lazy initial state function retrieves the saved step on component mount, while useEffect saves the current step whenever it changes. Unlike localStorage, this data won’t survive browser restarts, making it perfect for temporary workflow state.
Best Practice Note:
This is the approach we use in CoreUI multi-step forms where temporary persistence improves user experience without cluttering permanent storage. SessionStorage is ideal for wizard flows, temporary drafts, and any data that should reset with each new session.
