Velo wix wix-storage-frontend session

[kiapin]

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);
  })
  }
});

Additional information:
Chrome browser console log:

[CODE-NINJA]

Reading the following post…

How to use referrer on a button in Velo

I expanded the example for you, take a look onto it and check the LOGS in CONSOLE… [2024-05-09 10_50_03-Window] This is the running code on MASTER-PAGE… import wixLocation from 'wix-location'; import {session} from 'wix-storage-frontend'; $w.onReady(()=> {let memoryData = JSON.parse(session.getItem('memoryData')); if(memoryData) { memoryData.prevPageURL = memoryData.curPageURL memoryData.curPageURL = wixLocation.url; session.setItem("memoryData", JSON.stringify(memoryData)); conso…

…and checking the LOGS in CONSOLE → you will recognise that your statement is correct.

1. 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?

1. You still have → REDNDERING_ENV
2. And the fact that a login requires a page-reload? (as i can remember).
3. 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()

Your results must look like …

• 0.734565841051928
• 0.2970052199763069
• 0.009740853927113324

For you…

[kiapin]

@kiapin

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:

sessionTracking.jsw

import { currentMember, members } from 'wix-members-backend';
import wixData from 'wix-data';


export async function onLoginSetSession(){
    const memberObject = await currentMember.getMember({ fieldsets: ['FULL'] });
    const id = memberObject._id;
    const res = await wixData.query("user_sessions").eq("member", id).find()
    if(res.items.length > 0 ){
        const item = res.items[0]
        item.sessionid = getRandomInt()
        await wixData.update("user_sessions", item)
        .catch((err) => {
            console.log(err);
        });
        return item.sessionid
    }
    const sessionId = getRandomInt()
    await wixData.insert("user_sessions", {
        member: id,
        sessionid: sessionId
    })
    return sessionId
}

function getRandomInt() {
    return Math.floor(Math.random() * 10000);
  }

export async function CheckSessionId(){
    const memberObject = await currentMember.getMember({ fieldsets: ['FULL'] });
    const id = memberObject._id;
    let sessionid = getRandomInt()
    await wixData.query("user_sessions").eq("member", id).find()
    .then((results) => {
        if(results.items.length > 0) {
          let items = results.items;
          let firstItem = items[0];
          if(firstItem.hasOwnProperty("sessionid"))
          {
            sessionid = firstItem.sessionid
          }
        }
    })
       
    return sessionid;
    
}

Full frontend code is:

---

masterPage.js:

import { authentication } from "wix-members-frontend";
import {
  CheckSessionId,
} from "backend/SessionTracking.jsw";
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);
      const comparedSessionid = await CheckSessionId();

      if (sessionId != comparedSessionid) {
        console.log("Logout", sessionId, comparedSessionid);
        // storage.removeItem("sessionIdUserCheck")
        // setTimeout(() => {
        //     authentication.logout();
        // }, 5000)
      }
    }, 4000);
  }
 
});

---

customLoginPage.js

import { authentication } from 'wix-members-frontend';
import { session as storage } from 'wix-storage-frontend';
import { onLoginSetSession } from 'backend/SessionTracking.jsw';
import wixWindowFrontend from 'wix-window-frontend';


$w.onReady( function() {
 
  if (wixWindowFrontend.rendering.env === "browser") {

  authentication.onLogin(async (member) => {
  const sessionId = await onLoginSetSession()
  storage.setItem("sessionIdUserCheck", sessionId);
  })
  }
 
});

I just realised the image provided was not the correct screenshot. I’ve updated it since in the original post.

I hope with this extra information you can provide some guidance.
Thank you!

[CODE-NINJA]

@kiapin

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.

Yes, that makes sense.

I just realised the image provided was not the correct screenshot. I’ve updated it since in the original post.

Yes, now your code looks different…

…before…
const sessionId = Math.random()

…after…
return Math.floor(Math.random() * 10000);

However, it seems i can not find the issue.