Hi everyone,
I’m working on a Reactive Web App where I need to store a temporary sessionId for a questionnaire.
The requirement is:
If the user closes just the tab (but keeps the browser open), the answers should still be available when they return.
If the user closes the browser completely, the answers should be cleared.
For that reason, I chose to use sessionStorage instead of Client Variables (since Client Variables are based on localStorage and persist even after browser close).
What I implemented
On questionnaire start, I save the sessionId using:
sessionStorage.setItem("QuestionnaireSessionId", $parameters.SessionId);
On questionnaire resume, I retrieve it with:
return sessionStorage.getItem($parameters.Key);
The problem
When I navigate to another screen inside the same app, the sessionStorage value comes back as null.
From my understanding of browser behavior, sessionStorage should persist for the entire tab session, and only be cleared when the tab or browser is closed.
However, in my app, it disappears immediately upon navigating to another screen.
What I checked
Navigation is happening between screens in the same module, using the standard Navigate action (not ExternalURL).
Transition type (Module / Fade / Slide / None) makes no difference — data is still lost.
I tested in DevTools manually:
sessionStorage.setItem("testKey", "hello");
→ Navigated to another screen →
sessionStorage.getItem("testKey"); // returns null
My question
Is this expected in OutSystems Reactive apps?
Does OutSystems navigation reset the browsing context, so sessionStorage is not shared between screens?
If so, what’s the recommended way to achieve my requirement (persist answers across screen navigation, but clear them when the browser closes)?
Would really appreciate guidance on this 🙏
What you're using is plain JavaScript, nothing to do with OutSystems, and is defined like this:
Web Storage API for temporary, per-tab data. Cleared when tab/window closes.
See MDN - sessionStorage
To your problem: "return sessionStorage.getItem($parameters.Key);" won't work, as where is it returned to that you can access? You are running a JavaScript with a return value, so instead of return, you need to set an Output parameter which you can then read in from your Action.
$parameters.Out = sessionStorage.getItem($parameters.Key);
Sample:
1. Create a JavaScript node for setting the value and pass in the key and value when your questionnaire starts:
Read the value using a JavaScript node on the next screens' OnReadyEvent, passing in QuestionnaireSessionId as the Key and the value will be in the Out Output parameter.
(You can read the Session Storage on the OnInitialize event, but there may be potential performance issues, at least with local storage and server actions (so maybe sessionStore as well, as you may delay the rendering of the screen/block, not 100% on that, better to be safe than sorry)
For debugging, you can watch the Session Storage items using the Dev Console Application Tab - Storage - Session Storage - your URL.
I hope that helps.