如何使用JavaScript在Cookie中存储多个值？

Question

I have created a dynamic list (ie, a tag inside li tag) using jQuery. When I click on a link in the list for the first time, it stores that index value in a cookie (using javascript). Next time I run the application, in onload it retrieves the index value from the cookie and displays that link in a different color.

How can I store multiple values in the same cookie? How can I maintain previous values always in getcookie() and setcookie() ?

function link()
{
    $(".sidemenu li ").click(function() {        
        var index = $('li').index(this); 
        checkCookie(index);
    });
}   

function checkCookie(index)
{
    var linkindexvalue=index;

    setCookie("indexvalue",linkindexvalue,365);
}

function setCookie(c_name,value,exdays)
{
    var exdate=new Date();
    exdate.setDate(exdate.getDate() + exdays);
    var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
    document.cookie=c_name + "=" + value;
    alert(document.cookie);
}

$(document).ready(function(){

    var username=getCookie("indexvalue");
    $(".sidemenu li:eq("+username+")").css({ 'background' : 'yellow' });
    alert(username);
});

function getCookie(c_name)
{
    alert("hj");
    var i,x,y,ARRcookies=document.cookie.split(";");
    for (i=0;i<ARRcookies.length;i++)
    {
        x=ARRcookies[i].substr(0,ARRcookies[i].indexOf("="));
        y=ARRcookies[i].substr(ARRcookies[i].indexOf("=")+1);
        x=x.replace(/^\s+|\s+$/g,"");
        if (x==c_name)
        {
            return unescape(y);
        }
    }
}

Please guide me .

Thanks in advance.

Answer 1

Unless you need to support IE < 8, you should probably use localStorage rather than cookies. In fact, there are libraries like store.js which let you forget about such browser discrepancies (the best available technology is used).

If you really must uses cookies, though, do not invent your own serialization format! JSON works just fine.