jQuery: click add to array and save as cookie

Question

I have a function set up with the jQuery cookie plugin: https://github.com/carhartl/jquery-cookie, with the click function on .grid-block it stores each data-hook in an array, saves them as a cookie, then these chosen divs are viewable on the /itin/your-itin/ page. Here's a demo I've set up too: http://nealfletcher.co.uk/itin/ If you click on the .grid-block divs, this will add them to your itinerary, then when you navigate to: http://nealfletcher.co.uk/itin/your-itin/ only these divs are viewable and stored as a cookie for x amount of time. This works great, BUT if I then go back to add more divs, these are stored as a cookie, but the previous ones are wiped, I want to keep appending to the array, store it as a cookie, then when you navigate to: http://nealfletcher.co.uk/itin/your-itin/ it will display all your selections, even if they've been added separately. If that makes sense?
jQuery:

$(window).load(function () {

    var cfilter = [];

    var $container = $('.block-wrap');

    $container.imagesLoaded(function () {
        $container.isotope({
            itemSelector: '.grid-block',
            animationEngine: 'best-available',
            filter: '.grid-block',
            masonry: {
                columnWidth: 151
            }
        });


        $(".grid-block").click(function () {

            var thing = $(this).attr("data-hook");
            var test = "." + thing;

            cfilter.push(test);

            $.removeCookie('listfilter', {
                path: '/itin/your-itin/'
            });

            // We need to set the cookie only once
            // it stays at the url for 7 days
            $.cookie("listfilter", cfilter, {
                expires: 365,
                path: '/itin/your-itin/'
            });

        });


        if ($.cookie("listfilter") !== 'null') {
            // console log just for testing
            console.log($.cookie());
            $('.block-wrap').isotope({
                filter: $.cookie("listfilter")
            });
            return false;
        } else {
            // !! this part could be refactored
            // as you don't really need to check against the url
            // when the cookie doesn't exist show all elements
            $('.block-wrap').isotope({
                filter: ''
            });
        }
    });

});

Any suggestions would be greatly appreciated!

Answer 1

Change var cfilter = []; to var cfilter = $.cookie("listfilter");

This way you load the changed cookie and add to it instead of overwriting it.

Better code practice would be to check if the cookie exists before using it though, but you get my hint.

You made an error in implementing my change:

 if ($.cookie("listfilter") !== 'null') {
                var cfilter = [];
            } else {
                var cfilter = $.cookie("listfilter");
            }

is wrong, use

 if ($.cookie("listfilter")) {
                var cfilter =  $.cookie("listfilter");
            } else {
                var cfilter =[];
            }