How to let a user save custom stylesheet settings

Question

I have some stylesheets but how can I let a user save a custom stylesheet from the last time they were on the website? Could I do it in Jquery and HTLM5?

Answer 1

Yes, you can do this. You can either use a cookie, database, or browser storage. If you use browser storage it'd be HTML5, which is pretty simple to accomplish if you know your JavaScript. Otherwise, you have an easy way which is with a cookie, if you have an authentication system, separate that cookie from those which get deleted on logout, so those settings will remain until a user removes their cookies.

Cookies e.g. from MSDN

document.cookie = "test1=Hello";
document.cookie = "test2=World";
var cookieValue = document.cookie.replace(/(?:(?:^|.*;\s*)test2\s*\=\s*([^;]*).*$)|^.*$/, "$1");

function alertCookieValue() {
  alert(cookieValue);
}

e.g. document.cookie = myStyle;

See a full example here How do I create and read a value from cookie?

Then, the more preferable route, HTML 5, which an example is here Local Storage - HTML5 Demo with Code

EDIT: Here is a pastebin that might do it for you(seetrs you in the right direction from where i was coming from). http://pastebin.ca/3211127

Answer 2

There are many different ways you can do this but if you didn't want to gunk up your server with too much bloat of a database/cookies (this assumes you don't have an authentication system on the backend) then you could save a class so... something like, you'll need to do the css though:

    $(document).ready(function () {
        applyTheme();
    });


    $(".theme").click(function (e) {
        e.preventDefault();

        //removes current stylesheet
        $("#customSheet").remove();

        //gets the theme name the user clicked
        var themeName = $(this)[0].id;

        //sets it to storage
        setTheme(themeName);

        //appends to the head so it loads
        $('head').append('<link href="css/' + themeName + '.css" rel="stylesheet" id="customSheet" />');
    });

    // sets local storage, pretty self explanatory, localstorage is an object that persists across the browser state until the user clears it out, usually because of some other plugin or just clears the cache
    function setTheme(theme) {
        localStorage.setItem('themeClass', theme);
    }

    //how to apply the theme to the document's body so that it can conditionally load 
    function applyTheme() {
        var theme = localStorage.getItem('themeClass');

        if (theme) {
            $('head').append('<link rel="stylesheet" type="text/css" href="css/' + theme + '.css" id="customSheet">');
        }
    }

so if in your favorite thing, the css file was called "theme1", it'll load theme1 if you have it in the right path

EDIT:

The HTML to accomplish this specific way is

<div id="theme">
    <input type="button" id="theme1" class="theme">
    <input type="button" id="theme2" class="theme">
</div>

This'll work with all the way back to IE8 with no problems.... http://caniuse.com/#search=localstorage

You can just copy paste this somewhere and it'll work with your current stuff

EDIT: For people wondering what the entire code base would look like after here's a pastie: http://pastebin.ca/3212318