Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

jquery

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);
}
like image 431
MShack Avatar asked Jun 29 '15 04:06

MShack


People also ask

How to create a JavaScript cookie?

With JavaScript, a cookie can be created like this: document.cookie = "username=John Doe"; You can also add an expiry date (in UTC time).

How do I get a cookie name?

in order to retrieve specific cookie value, we just need to get string that is after "; {name}=" and before next ";". Before we do any processing, we prepend the cookies string with "; ", so that every cookie name, including the first one, is enclosed with "; " and "=": "; {name}={value}; {name}={value}; ..."


1 Answers

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.

like image 200
Matt Derrick Avatar answered Sep 28 '22 18:09

Matt Derrick