Question / Help Localstorage issue on Browser Source Obs Studio

[Nebih Nebihi]

Hello everyone, I hope someone can help me out with this.

I have build a local website, for a animated loading screen for my twitch account.
I inject the local HTML file (with local html, css and javascript files) via the Browser Source, and I get a NaN issue, if I try to get access to a localstorage value in the browser.

My code works perfectly fine in all browsers, If I set the value hard coded into the script, it works. But I implemented a little local backend, where I get the value from the localstorage.

Here the hardcoded value: (5 minutes)

progress(500, 500, $('#progressBar')); (500 is the value of the timeleft and timetotal)

If I replace the hard value with my localstorage value, I get following error:
var streamValue = localStorage.getItem('streamValue');

progress(streamValue, streamValue, $('#progressBar'));

In all browsers this works perfectly fine. How does the browser source work?

I hope someone can help me out.

Kind regards,
Neb

 

[Osiris]

Tried loading it from the webserver? Preferably from the one that also has the javascript that sets the localstorage value.
Also how is the steamValue getting filled? I only see you using getItem.

 

[Nebih Nebihi]

Tried loading it from a webserver? Instead of a local file.
Also how is the steamValue getting filled? I only see you using getItem.

I fill it in my admin.js

If you call the local url, instead of index.html, admin.html, you can adjust your localstorage value there. So the browser saves the data.

var select = document.querySelector("#optionsId");
var selectOption = select.options[select.selectedIndex];
var lastSelected = localStorage.getItem('streamValue');

if(lastSelected) {
    select.value = lastSelected; 
}

var localStorageValue = localStorage.getItem('streamValue');

if(!localStorageValue){
    localStorage.setItem('streamValue', 500);
}



$('#save').on('click', function(){

    var value = $( "#optionsId option:selected" ).val();
   
    localStorage.setItem('streamValue', value);

    lastSelected = value;


    select.onchange = function () {
     lastSelected = select.options[select.selectedIndex].value;
     console.log(lastSelected);
     localStorage.setItem('streamValue', lastSelected);
 }

});


function store_data() {

    var img = new Image();
    img.src =  URL; //js global var

    img.onload = function( ) {

        var canvas  =  document.getElementById( 'myCanvas'); 
        canvas.setAttribute( "width", img.width );
        canvas.setAttribute( "height", img.height );

        var context  =  canvas.getContext( '2d' );
        context.drawImage( img, 0, 0 );
        canvas.style.width = "100%"; 
        var data = canvas.toDataURL("image/png");
        localStorage.setItem( "data", data );
    }

}

Webserver would be my last solution. I just tried to do it quick and performant as possible. But if there is no other solution, I'd say I try to set up a local webserver.

But for the question: I assume that the Browser Source is an own "browser", does it bring a localstorage or session storage with it?

Thanks for the fast reply.

 

[Osiris]

But where are you setting the value, in a browser? Or in the browser source?
If the value is not set from the browser source then obviously the browser source won't know that value.

 

[Nebih Nebihi]

Hey,
technically I set the value in the browser. I save it in the localstorage. If I use my chrome, the value gets saved perfectly fine into the local storage. If I use the browser source option in OBS Studio, it starts my file and doesn't save the value in its own storage - seems like there is no local storage given. I just set up a local webserver, seems to work fine so far.

Thanks for your help!

 

[Osiris]

Localstorage works fine in the browser source, I just tested it. 1 file tests the value and another reads it and the value is remembered.

 

[Nebih Nebihi]

Oh, I found the issue.. I didn't initially filled the localstorage. Thanks alot Osiris, you helped me out! Thanks for the great support, works like a charm!

 

[ElPichiGF]

Could you show me how you solved the problem, because I have the same problem and I don't know why it doesn't work