how to store id localstorage every time i click on button

Question

I have the following problem, I am using jquery mobile to build a webapp. On the startup page of the webapp (index.html) I am showing a list of events. when a user clicks on a event, (eventsDetail.html) gets loaded. On this page users have te option to join a contest by 'clicking the joinContest button'.

Question: When I click the joinContest button multiple times and navigate back to index.html and click the .btn-showContests button only one id was stored (this is the id of the contest I clicked last) How can I store all the id's of the contests I have clicked on, so that when I navigate back to index.html and click the .btn-showContests it is getting all the id's I have clicked?

file: eventdetails.js

$('.btn-joinContest').live('click', function(e){
    if (Modernizr.localstorage) {
        var id = getUrlVars()["id"];

        localStorage.setItem("contestId", id);
    } else {
        console.log('browser doesnt support localstorage')
    }   
});

file: eventlist.js

note: when i click the button .btn-showContests it executes this function.

function showContests(){
    var contests = localStorage.getItem("contestId");
    if(contests == null) {
        console.log('Nothing in store');
    }
    else if (contests.length === 0) {
        console.log('Store contains empty value');
    }          
    console.log(contests.length);       
}

Answer 1

I think every time you do the click on the button, you are overwriting the "contestId", if you want to keep the list of the clicked items, you may want to do

var currentlist = localStorage.getItem("contestId");
currentlist = currentlist +" "+ id;
localStorage.setItem("contestId", currentlist);

or in better style.. store it in an array.

hope this helps~