How do i add a cookie to cache stylesheet change in this script

Question

I need to add a cookie to this script so when you click #full-width or #fixed-width it will remember your view on your next visit

<button id="full-width">GO FULL WIDTH</button>
<button id="fixed-width">GO FIXED WIDTH</button>

$(document).ready(function () {

    $("#full-width").click(function () {

        $('head').append('<link rel="stylesheet" href="http://www.nitrografixx.com/2015/ladder/full-ladder.css" type="text/css" />');

    });

    $("#fixed-width").click(function () {

        $('link[rel=stylesheet][href="http://www.nitrografixx.com/2015/ladder/full-ladder.css"]').remove();

    });

});

I found this cookie that was already on my site for another script , but i don't have any idea on how to install it for the script above.

function setCookie(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=/; domain=.myfantasyleague.com";
}

function getCookie(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 deleteCookie(name) {
    createCookie(name, "", -1);
}

Answer 1

I think cookies are a bit overkill for this and are not really needed. You can do this a nice way with localStorage instead if you don't have to use cookies for other various reasons not stated.

https://jsfiddle.net/4bqehjfc/3/

var fullWidth = function() {
        $('head').append('<link rel="stylesheet" href="http://www.nitrografixx.com/2015/ladder/full-ladder.css" type="text/css" />');
    },
    fixedWidth = function() {
        $('link[rel=stylesheet][href="http://www.nitrografixx.com/2015/ladder/full-ladder.css"]').remove();
    };

$("#full-width").click(function () {
    localStorage.setItem('width', 'full-width');
    fullWidth();
});

$("#fixed-width").click(function () {
    localStorage.setItem('width', 'fixed-width');
    fixedWidth();
});

if (localStorage.getItem('width') == 'fixed-width') {
    fixedWidth();   
} else if (localStorage.getItem('width') == 'full-width') {
    fullWidth();
}

The important bit is: localStorage.setItem() and localStorage.getItem().

localStorage is well supported and offers a nice clean alternative to Cookies (for some purposes) but also has it's own limitations. See here.

One important thing to note is switching stylesheets like this you are going to flashes of unstyled content whilst the stylesheets are fetched which isn't very nice. You would want to use localstorage to append a CSS class and change the styles this way if you have the flexibility to do so.