Question

I am trying to create and store a cookie with the jQuery Cookie Plugin. I want to cookie to just be an ordinary counter. I need it to be a cookie because I want to keep the counter going if the page is refreshed. When some condition is true I want, 1 to be added to the cookie value. It seems simple but I am having trouble with using the plugin.

I have created the cookie like this:

$(document).ready(function(){
    $.cookie("cookieValue", "0", { expires: 7 , path: '/' }); 
});

A small example of what I’m trying to achieve:

if (/*some condition*/) {
    cokieValue++;
}

That did not work when the condition was true, the cookie value remained at 0. I also tried:

$(document).ready(function(){
    $.cookie("cookieValue", "0", { expires: 7 , path: '/' });  
    var cookieValue = parseInt($.cookie("cookieValue"));

    if (/*some condition*/) {
        cookieValue++;
    } 
});

This also did not work – cookieValue remained at 0. Any suggestions on how I can accomplish this?

Answer 1

You need to check to see if it exists before you update it with zero.

if( $.cookie('cookieValue') === null ) { 
    $.cookie( 'cookieValue', '0',  { expires: 7, path: '/' } );
}

You need to save the value after you update it.

$.cookie("cookieValue", cookieValue, { expires: 7 , path: '/' })

So the final code would look like

$(function(){  //shortcut for document.ready
    var cookieVal = $.cookie("cookieValue");  //grab the cookie
    if( cookieVal === null ) {   //see if it is null
        $.cookie( 'cookieValue', '0',  { expires: 7, path: '/' } );  //set default value
        cookieVal = 0;  //set the value to zero
    }
    var cookieValue = parseInt(cookieVal,10);  //convert it to number

    if (/*some condition*/) {
        cookieValue++;  //increment the value
        $.cookie("cookieValue", cookieValue, { expires: 7 , path: '/' }); //save new value
    } 
});