Question

first time poster, long time reader.

So I needed to create a quick and simple treasure hunt. The ideas was to store some values in a cookie and, when the user click on an element with a matching id, update the following value. It’s not in there yet but when the person has found all 8 (in this case) it will trigger something.

Now, I’ve gotten it to mostly work but I’m running in to a big problem. The cookie is not being stored from page to page. If I’m working off a single test page it’s just fine – the cookie is created, values are pulled from it and put in to a check array, and the counter increments correctly. Also, when the cookie is updated the new values are being stored just fine.

However, when I go to another page and check for the cookie – it’s gone. Now I checked to see if the cookie was actually getting dropped in and yes, it’s there. But there are multiple cookies all with the same name (they are updating values – but again it’s only page to page so no cumulative effect).

So, I guess I don’t understand why when I call the cookie and reset it, it’s not affecting a single cookie but creating a new one?

Oh, I’m using jQuery 1.4.2 and the jQuery cookie plugin.

// if not present create default array and store in cookie cookie
if($.cookie('treasure_hunt') == null) {

var treasure = new Array(
    "arteContactEn",0,
    "arteCorpEn",0,
    "arteServicesEn",0,
    "arteRoomsEn",0,
    "arteDiningEn",0,
    "artePackEn",0,
    "arteHotelEn",0,
    "arteHomeEn", 0
)
   $.cookie('treasure_hunt', treasure, { expires: 7 });
}

// capture cookie info
var treasureFound = $.cookie('treasure_hunt');

// create check array and parse values into it
var treasureCheck = new Array();
var treasureCheck = treasureFound.split(',');

// function checks array and tallies total found items
function checkFound() { 
var foundItems = 0;

for(var i=0; i<treasureCheck.length; i++) {
    var value = treasureCheck[i];
    if(value == 1) {
        ++foundItems;
    }
}
// writes found items to span on page
$('.thProgress').text(foundItems);

}

// check number artefacts and write to page
var treasureTotal = treasureCheck.length / 2;
$('.thTotal').text(treasureTotal);

// on click checks element id against array and, if found, marks the following value as 1
$('.artefact-right, .artefact-left').click(function(){
var artefactID = $(this).attr('id');

for(var e=0; e<treasureCheck.length; e++) {
    var matchID = treasureCheck[e];
    var k = e + 1;

    if(matchID == artefactID) {
        treasureCheck[k] = 1;

        // checks for total found items
        checkFound();

        // updates cookie with new array
        $.cookie('treasure_hunt', treasureCheck, { expires: 7 });
    }

}

});

Answer 1

According to the README file in github, you need to define the path the cookie is valid for if you don’t want it to be only for the page it was created on:

Define the path where cookie is valid. By default the path of the
cookie is the path of the page where the cookie was created (standard
browser behavior). If you want to make it available for instance
across the entire page use path: ‘/’. If you want to delete a cookie
with a particular path, you need to include that path in the call.

So I think it would be something like this:

$.cookie('treasure_hunt', treasure, { expires: 7, path: '/' });

P.S. You’re missing a semicolon at the end of your var treasure = new Array() declaration.