How to set an item in sessionStorage in JavaScript
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Setting items in sessionStorage enables temporary data storage that persists throughout the browser session but clears when the tab closes.
As the creator of CoreUI with extensive JavaScript experience since 2000, I’ve used sessionStorage extensively for form data, temporary state, and session-specific configurations.
From my expertise, the most reliable approach is using the sessionStorage.setItem() method which stores data as key-value pairs for the current session.
This storage method is perfect for temporary data that shouldn’t persist across browser sessions.
Use sessionStorage.setItem() to store data that persists during the current browser session only.
sessionStorage.setItem('tempData', 'This will be cleared when tab closes')
Here sessionStorage.setItem('tempData', 'This will be cleared when tab closes') stores the string value under the key ’tempData’ for the current browser session. SessionStorage data remains available while the tab is open, survives page refreshes, but gets cleared when the tab or browser window closes. For complex data, use JSON.stringify() before storing and JSON.parse() when retrieving to handle objects and arrays properly.
Best Practice Note:
This is the same approach we use in CoreUI components for storing temporary form state, wizard progress, and session-specific user preferences. SessionStorage is ideal for sensitive temporary data since it automatically clears when the session ends, providing better security than localStorage for short-term storage needs.
