Keep a var when updating the code

Question

I wanna make a thing in javascript and html and I've got a problem.

I've a selection page where I can click on 8 different buttons, and I want a var to take the id of this button. This button throw me on an other page, which have to use this var.

The problem is that when the code is called once again in the second page (to return the var in my main function otherwise it's not working), this code is updated and my var is obviously reset to 0;

I want to keep the value of this var when I call it again in my other page.

Thank you !

levelSelected = 0;

// Récupère le click 
for (var i = 0; i < 8; i++) {
    $('#level' + i).click(function() {
        levelSelected = this.id;
        console.log(levelSelected);
        location.href='level.html';
    });
}

Use [localStorage](http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage) or [cookies](http://stackoverflow.com/search?q=cookie), or pass that information on as a [query string](http://stackoverflow.com/search?q=query+string). — Terry, Jan 12 '15 at 21:21
Depending on the use case, sometimes sessionStorage might make more sense (it works in just about the same way as localStorage, but is stored in memory, and goes away when the browser is closed) — Katana314, Jan 12 '15 at 21:27

score 2 · Answer 1 · edited May 23 '17 at 11:50

One way of doing it beside localStorage or cookies is to pass it in the URL, i.e. using parameters:

levelSelected = 0;

// Récupère le click 
for (var i = 0; i < 8; i++) {
    $('#level' + i).click(function() {
        levelSelected = this.id;
        console.log(levelSelected);
        location.href='level.html?levelSelected=' + levelSelected;
    });
}

Have a look at How to retrieve GET parameters from javascript? to see how you can later retrieve the parameters in the next page.

Also How can I get query string values in JavaScript? as Terry suggested in the comments in your answer.

Edit:

Just in case you're not familiar with GET properties - you have have any number of them, just the first one must be preceded by a ? while all the other ones must be preceded by a &.

So:

location.href='level.html?levelSelected=' + levelSelected + '&otherParam' + paramValue;

score 1 · Answer 2 · answered Jan 12 '15 at 21:25

Try local storage.

for (var i = 0; i < 8; i++) {
    $('#level' + i).click(function() {
        levelSelected = this.id;
        console.log(levelSelected);
        location.href='level.html';
        localStorage.id = levelSelected;
    });
}

Then on the page you want to use it on call the var back.

localStorage.getItem('levelSelected');

Keep a var when updating the code

2 Answers2