Save javascript variable throughout several browsing sessions?

Question

my question might be simple, but i just dont get managed how to do this. i want to save 'bgid' throughout several browsing session and page reloads. i thought about using cookies, but i do not know how to imply them. here is my code (btw, i am using jQuery):

<script> 

    var bgid = 2;
    var bgnumber = 3;

    $('#changebg').click(function() {
        $('body').removeClass();
        $('body').addClass('class' + bgid);
        if(bgid < bgnumber + 1) {
            bgid = bgid + 1; 
        } else {
            bgid = 2; 
        }
    });

</script>;

could you guys help me? thanks! :)

"i thought about using cookies, but i do not know how to imply (sic) them" Then use google or the search feature within Stack Overflow instead of asking another question. You should be sure to do research before posting a question. — zzzzBov, Apr 20 '16 at 18:36

Leonid Lazaryev · Answer 1 · 2016-04-20T18:42:15.050

2

Use local storage:

var bgid = !localStorage.getItem('bgid')? 2 : parseInt(localStorage.getItem('bgid'));
bgid += 1;
localStorage.setItem('bgid', bgid);

edited Apr 20 '16 at 18:42

answered Apr 20 '16 at 18:28

Leonid Lazaryev

326
1
8

thanks, but that does not work, cause everytime i reload the page the script gets loaded and 'localStorage.setItem('bgid', '2');' gets called, so at every reload bgid gets 2.. – bastianum Apr 20 '16 at 18:35
So start your script with: var bgid = !localStorage.getItem('bgid')? 2: localStorage.getItem('bgid') – Leonid Lazaryev Apr 20 '16 at 18:40

score 1 · Answer 2 · answered Apr 20 '16 at 18:30

You can use localStorage for that purpose. Simply do something like

var bgid = window.localStorage.bgid;

The only thing you have to remember is that the data you retrieve will be a string.

Example:

if (window.localStorage.bgid !=== undefined) // check whether the data already exists 
   window.localStorage.bgid = 2; // if not, we set the 2 as default value

Then you access bgid using window.localStorage.bgid. If you want to get a number use either parseInt or just add '+' in front of window.

If you want to save the data simply type

window.localStorage.bgid = newValue;

score 0 · Accepted Answer · answered Apr 20 '16 at 18:31

0

I would like to suggest you to use localStorage

<script>
    if (localStorage.getItem("bgid"))
    {
        var bgid = parseInt(localStorage.getItem("bgid"));
    }
    else
    {
        var bgid = 2;
    }
    var bgnumber = 3;

    $('#changebg').click(function () {
        $('body').removeClass();
        $('body').addClass('class' + bgid);
        if (bgid < bgnumber + 1)
        {
            bgid = bgid + 1;
        }
        else
        {
            bgid = 2;
        }
        localStorage.setItem("bgid", bgid);
    });
</script>

answered Apr 20 '16 at 18:31

AsgarAli

2,201
1
20
32

thanks, works! :) – bastianum Apr 20 '16 at 18:45
If it works then please can you up vote my answer ? – AsgarAli Apr 21 '16 at 10:35

score 0 · Answer 4 · answered Apr 20 '16 at 18:35

I wouldn't use cookies if i were you but instead most browsers implement localstorage

egxample:

<script> 

var bgid = 2;
if(localStorage.getItem("bgid") != null){// this checks bgid exists
    bgid = localStorage.getItem("bgid");//and this sets bgid to the localstorage value
}
var bgnumber = 3;

$('#changebg').click(function() {
$('body').removeClass();
$('body').addClass('class' + bgid);
if(bgid < bgnumber + 1){
    bgid = bgid + 1; 
}
else{
    bgid = 2; 
}
localStorage.setItem("bgid");// this sets the value 
});

</script>;

this should work for you but the above answers should be sufficient

Save javascript variable throughout several browsing sessions?

4 Answers4