Inconsistency with data stored in the sessionStorage and when it is retrieved

@vincent15000, sorry for missing that and for the delay. here's the javascript code below.

  if (getTempStore(`sp_${project_id}`) != null) {
                // GetTempStore is function for sessionStorage.getItem()
                let sp = getTempStore(`sp_${project_id}`);

                $(`ul.space_programs_sp li[data-id="${sp.id}"]`).click();
                // populate(sp)   
     }
  if (getTempStore(`capex_${project_id}`) != null) {
                // select the space_program
                let sp = getTempStore(`sp_${project_id}`);
             
            }

i am trying to retrieve sp twice in each block from sessionStorage (i know, i couldve done it one, but still i want to know the reason for this behavior), in the first if block, everthing works fine, in the second if block, the retrieved object will have missing data. i am really not sure what is the issue. funnily enough, when i change the variable sp to something else in the second if block, then it works fine. like what is happening?????

GetTempStore function

function getTempStore(key){
    return JSON.parse(sessionStorage.getItem(key));
}

thanks in advance.

@Karthik_hebbar Can you show the code where you store the key/value pairs in the session storage ?

Hi @vincent15000 , code where i store in session storage

 $(document).on('submit', 'form.edit-space-program', async function(e) {
            e.preventDefault();
            let sp_id = $(this).data('id');

            if ($(this)[0].reportValidity()) {
                loader(true);
                let formData = new FormData($(this)[0]);
                let response = await updateSpaceProgram(sp_id, formData);
           
                if (response) {
                    if (save) {
                        success('successfully updated');
                        removeTempStoreById(project_id);
                        location.href = "{{ route('home') }}";
                    } else {
                      //this is where i store the sp in the session storage
                        setTempStore(`sp_${project_id}`, response.sp);

                 
                    }
                } 
                loader(false);
            }
        });

setTempStore function as below

function setTempStore(key,value){
    sessionStorage.setItem(key,JSON.stringify(value));
}

here's weird thing i came across while testing it out myself, now if i store getTempStore(to retrieve and parse the object) function returned value to a variable, then these inconsistency in data arises for example, if i do:

let sp = getTempStore(`sp_${project_id}`);
sp.workareas

if i do like below

(getTempStore(`sp_${project_id}`)).workareas

i don't face inconsistency in the data. i knew js is weird, but damn..i've been scratching my head for weeks now... could not find anything online. data stored in the session storage is consistent. facing issue when i retrieve it Thanks in advance.

@Karthik_hebbar Ok that's what I wanted to check : if you had stringified the value, that's ok. Notice that you need to stringify the value only if the value is an object.

When storing to and getting the value from the session storage, I would check the project id value : console.log(project_id);.

Then I would also check if the right value is stored in the session storage directly by having a look in the dev tools of the browser.

You can also test with a fixed value to be sure that all works as you want.

sessionStorage.setItem('sp_23', '254865');

console.log(sessionStorage.getItem('sp_23'));

Hey @vincent15000 , Project ID is correct, and i checked in the devtool, application tab, sessionStorage section, everything is consistent there, and i checked with fixed value and retrieved it from sessionStorage, data becomes inconsistent. For the life of me i am not able to find the issue :(

@Karthik_hebbar Oh that's strange, you mean that all is correct if you look at the values in the devtools ? But not when you retrieve these values with a JS code ?

You probably don't retrieve the right key.

Can you show a screenshot of the values in the devtools please ?

Hi @vincent15000 , screen shot from the session storage https://imgur.com/a/q3mJYul

screenshot from the console tab logging the same object retrieved from sessionStorage https://imgur.com/2XkH9Fo

notice the "variations" property, which is in the "design_options" array's 4th element, that property's array is empty when retreived and logged in the console, but it is not empty when i view it in sessionStorage directly.(please don't mind the 11 errors, those are 404 errors of the missing images.), and i am not performing any operation on the retrieved object from sessionStorage as i noted on the above code

thanks in advance

@Karthik_hebbar What do you get in the console if you type sessionStorage.getItem('sp_157'); ? Do you see the variations property empty or not empty ?

Hi @vincent15000, if i do sessionStorage.getItem('sp_157'); on console, data is consistent, variations array is not empty. i was wondering if there is any limit in storing of large object in the sessionStorage, but the funny thing is, in the other part of my code, if i retrieve it, i get consistent data, but if i do the same thing in other part of my code, data gets inconsistent. is it a issue in constantly retrieving the same data from sessionStorage? because i am doing that everywhere in my code (i retrieve them in functions and assign them to variable declared using "let").

@Karthik_hebbar That's not possible, unless you have a part of your code that changes changes the content of the variables.

You should add several console.log() at different places in your code all along the lines executed so that you can identify the lines where the content of the variables is changed : outside the functions, inside the functions, before the functions, after the functions, ...

Once you have identified the place where it bugs, you will be able to update the code so that it works as you need.

@vincent15000

That's not possible, unless you have a part of your code that changes changes the content of the variables.

"I would suggest, Captain, that if something is happening, then it can happen." — Spock

It's happening to me, right now.

• When my code pulls the session variable, it is an outdated default one.
• When I pull it in the console, it's correct, the one that I updated before the refresh.
• If I have my code wait ten seconds after browser load, so I can pull it in the browser console first, the console version is correct. Then the console.info() from in my code is wrong. Then I run my manual console version again, and it's correct.

It's like the program code is accessing a different session than I am in the browser.

Except that it did set the correct info at some point, which is what I'm seeing when I run it manually.

@Kazymandias You should never be able to access session data in the browser. If you can, you have a serious security issue, or you are confused betweebn php sessions and local storage.

@Snapey No, I'm saying that I'm using sessionStorage, instead of localStorage.

It's a browser API that stores data as long as the session persists.

Works fine client-side, in theory. I eventually just kluged the problem without solving it, but of course one can set and get the info from the console as well as from a javascript file run in the browser from the server.