Question

I have a website which uses different style sheets from which users can choose the active sheet using this code:

    function setActiveStyleSheet(title) { //title is the title of the link.
   var i, a, main; //i is the index pointer, a is a variable used to store the link statement at i
   for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { //gets all the link elements
     if(a.getAttribute("rel").indexOf("style") != -1 // gets the link elements relating to stylesheets
            && a.getAttribute("title")) { //which have the wrong title
                a.disabled = true; //disables the wrong stylesheets
                if(a.getAttribute("title") == title) 
                {
                    a.disabled = false; //if the title of a is equal to the search query, then it is enabled.
                }
     }
   }
}

function changeStyleSheet(sender){
    if (sender == "greythumb")
    {
        setActiveStyleSheet('main');
        document.getElementById(sender).className="selected";
        document.getElementById('redthumb').className="notSelected";
    }
    if (sender == "redthumb")
    {
        setActiveStyleSheet('alternative, red');
        document.getElementById(sender).className="selected";       
        document.getElementById('greythumb').className="notSelected";
    }
}

Which works fine (there are only two at the moment)

However, if the user selects the red CSS, I want it to remember this when the user navigates to another page. I remember reading somewhere that this is done with cookies, but cannot find it for the life of me, So how should I implement this?

Cheers

Answer 1

it’s fairly easy – http://www.quirksmode.org/js/cookies.html

function createCookie(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=/";
}

function readCookie(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;
}

function eraseCookie(name) {
    createCookie(name,"",-1);
}

then you do

createCookie('stylesheet', 'red', 365);

and read it on the next page with readCookie

var x = readCookie('stylesheet');
if (x) {
    [ do something with x ]
}