Why does jQuery cookie not actually set a cookie?

Question

I am developing an application using jQuery that uses cookies. Right now, it is located at application.html on my PC desktop.

However, I cannot store and retrieve a cookie. I had included jquery-1.7.1.min.js, json2.js, and jquery.cookie.js in my HTML file in that order.

Here is how I am storing a cookie to last for 7 days:

$.cookie("people", JSON.stringify(people_obj_array), {expires: 7});

The global array people_obj_array looks like

[
        {
            "name": "Adam",
            "age": 1,
        },
        {
            "name": "Bob",
            "age": 2,
        },
        {
            "name": "Cathy",
            "age": 3,
        },
    ]

When I test JSON encryption with alert(JSON.stringify(people_obj_array)), it looks fine:

However, when I retrieve this cookie via:

alert($.cookie("people"));

before even refreshing the page, an alert pops up that reads "null." Shouldn't the text be the alert JSON string? Am I using the JQuery cookies library correctly?

---

Just to clarify, here is how I am testing:

$.cookie("people", JSON.stringify(people_obj_array), {expires: 7}); // store
alert($.cookie("people")); // attempt to retrieve

I have Firebug, and I am willing to do some Console tests.

Answer 1

It's probably the fact the file is on your desktop that's causing the problem. Browsers normally behave by serving up cookies based on the domain they were received from and their path.

You may not be able to read the cookie immediately after setting it: Writing a cookie involves setting headers in a HTTP request and, likewise, reading them involves reading headers in a HTTP response.

Try hosting your page on a web-server and see if that works for you.

Answer 2

If you are having troubles with the cookies plugin why not just make up your own cookie functions? Read, Write and (optional) delete.

var createCookie = function(name, value, days) {
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        var expires = '; expires=' + date.toGMTString();
    }
    else var expires = '';
        document.cookie = name + '=' + value + expires + '; path=/';
};
var readCookie = function(name) {
    var nameEQ = name + '=';
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
};
var eraseCookie = function(name) {
    createCookie(name, '', -1);
};

I cannot comment on the specific plugin as I have never used it.. however these functions all work and have been tested.

So for your example:

createCookie("people", JSON.stringify(people_obj_array), 7); // store
alert(readCookie("people")); // retrieve
eraseCookie("people"); // remove
alert(readCookie("people")); // oo look i'm no longer here.

Answer 3

From my research jquery.cookie.js is fairly old, and doesn't seem to be maintained any longer. You might have better luck using this library instead. Its description on Google Code is "Javascript Cookie Library with jQuery bindings and JSON support", and includes methods for everything you're trying to do!