Question:
Can someone help debug wix-storage-frontend. My session variable is disappearing without being cleared or removed by any of my code.
Product:
Wix Studio
What are you trying to achieve:
I am trying to get my session item (sessionIdUserCheck) to persist across page loads.
I am getting the following unexpected behaviour.
After my custom login, the session variable stores correctly.
However, as soon as I refresh the page, or navigate to another page, the session storage item becomes null. I can confirm I have NOT called session.clear() or session.removeItem() anywhere in my codebase.
Refer to logs at the bottom.
What have you already tried:
I have the following code in masterPage.js
import { session as storage } from "wix-storage-frontend";
import wixWindowFrontend from "wix-window-frontend";
$w.onReady(async function () {
if (wixWindowFrontend.rendering.env === "browser") {
setInterval(async () => {
const sessionId = storage.getItem("sessionIdUserCheck");
console.log("sessionId", sessionId);
}, 4000);
}
});
and in a custom login page
import { session as storage } from "wix-storage-frontend";
import wixWindowFrontend from "wix-window-frontend";
$w.onReady( function() {
if (wixWindowFrontend.rendering.env === "browser") {
authentication.onLogin(async (member) => {
const sessionId = Math.random()
storage.setItem("sessionIdUserCheck", sessionId);
})
}
});
…and checking the LOGS in CONSOLE → you will recognise that your statement is correct.
A SESSION normaly do not disappear after the page has been refreshed.
Session: Data in session storage is available while the site visitor’s web session is active. The session ends when the visitor closes the browser tab or window. When the session ends, all the data in session storage is lost. Reloading or restoring the page does not affect session storage data. You can store up to 50kb of data in session storage.
Your imports of the storage is somekind of strange…
import { session as storage } from “wix-storage-frontend”;
Shouldn’t it be… import {session} from 'wix-storage-frontend';
Also the question, if the MASTER-PAGE could affect the storage is resolved, since in my example, everything is working fine on the master-page.
So what else could affect the functionality of the session?
You still have → REDNDERING_ENV
And the fact that a login requires a page-reload? (as i can remember).
I think the same PAGE-RELOAD happens on LOG-OUT.
But not sure anymore.
Sure that you want to use … floating-point numbers -----> const sessionId = Math.random()
I don’t believe I’m actually using a floating point number in my actual code. It should be an integer between 0 and 10000. (Refer to full code below).
I intentionally want the code to run only in the front-end because 1.) it’s setting the browser session variable and 2.) I don’t want some of the database logic to run twice. If I don’t include the check for rendering in the browser (RENDERING ENV) then the code pre-render server side causing extra database readwrite ops. I want the server side function onLoginSetSession to be called only once upon user login.
For more context, this code is actually in a back-end function. The code I had provided is simplified.
Full code in the backend and frontend is as follows: