local storage, save css filename through javascript

Question

I am making a page where the user can change several looks/style on the page through drop-down menu, which changes css file name. I have managed to change the stylesheet through drop-down menu but I would now like to save the currently css file on local storage. For example if the user changes to stylesheet3.css (through drop-down menu) then this style/look will be set next time user visits page. Here is my code:

HTML:

<link id="myStyleSheet" href="stylesheet1.css" rel="stylesheet" type="text/css"> I put an id in stylesheet

<div id="changeLook">
    Change style:
    <select id="changeStyle" onchange="changeStyleFunction()">
        <option value="stylesheet1.css">Style 1</option>
        <option value="stylesheet2.css">Style 2</option>
        <option value="stylesheet3.css">Style 3</option>
        <option value="stylesheet4.css">Style 4</option>
    </select>
</div>

JavaScript:

function changeStyleFunction() {
    var href;
    var value = document.getElementById("changeStyle").value;

    localStorage.setItem("GetData" , value); //Here is my biggest problem???

    href = value;

    document.getElementById('myStyleSheet').href = href;    
}

How do I make the current stylesheet(value) get in to localStore? I am very new at Local Storages... Thanks!

Code looks good..You need to read localstorage value every time when page reloads... — Rayon
– Rayon, Commented May 17, 2015 at 8:01

kizisoft · Accepted Answer · 2015-05-17 09:51:50Z

4

First you should be sure that document is loaded and after that to read the value from localstorage:

main.js:

(function () {
var DEFAULT_CSS = 'stylesheet.css',
    styleElement,
    styleOption;

document.addEventListener('DOMContentLoaded', function (e) {
    var styleElement = document.getElementById('myStyleSheet'),
    styleOption = document.getElementById("changeStyle"),
    currentCSS = localStorage.getItem('GetData') || DEFAULT_CSS;
    styleElement.href = currentCSS;
    styleOption.value = currentCSS;
    styleOption.addEventListener('change', changeStyleFunction);
});

function changeStyleFunction() {
    var newCSS = styleOption.value;
    localStorage.setItem('GetData', newCSS);
    styleElement.href = newCSS;
}
}());

index.html:

    <!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link id="myStyleSheet" href="stylesheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="changeLook">
    Change style: <select id="changeStyle">
    <option value="stylesheet.css">Default Style</option>
    <option value="stylesheet1.css">Style 1</option>
    <option value="stylesheet2.css">Style 2</option>
    <option value="stylesheet3.css">Style 3</option>
</select>
</div>
<script src="main.js" type="text/javascript"></script>
</body>
</html>

stylesheet.css:

#changeLook {
    background-color: #eee;
}

stylesheet1.css:

#changeLook {
    background-color: #ff0000;
}

stylesheet2.css:

#changeLook {
    background-color: #00ff00;
}

stylesheet3.css:

#changeLook {
    background-color: #0000ff;
}

EDIT: I added all the files.

EDIT2: Yes, that was the error I forgot to assign variables on document ready, Sorry, now should be ok.

edited May 17, 2015 at 9:51

answered May 17, 2015 at 8:59

kizisoft

3862 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

toppen Over a year ago

Thanks, but when I try this I get this error: TypeError: styleOption is null I tried: styleOption = document.getElementById("changeStyle").value; Then it said: TypeError: document.getElementById(...) is null

toppen Over a year ago

I fixed it! I "put styleOption = document.getElementById("changeStyle"); " inside document.addEventlistener

Rayon · Accepted Answer · 2015-10-29 15:09:59Z

1

Try this:

<script>
                document.addEventListener("DOMContentLoaded", function()
                {
                        var defaultCSS="defaultCSS.css";
                        var yourHref=localStorage.getItem("GetData");
                        if(typeof yourHref === 'undefined' || yourHref === null)
                        {
                                document.getElementById('myStyleSheet').href=defaultCSS;
                        }
                        else
                        {
                                document.getElementById('myStyleSheet').href=yourHref;
                        }
                });
        </script>

edited Oct 29, 2015 at 15:09

answered May 17, 2015 at 8:12

Rayon

36.6k5 gold badges54 silver badges78 bronze badges

1 Comment

Avisek Chakraborty Over a year ago

You should check for 'null'

Collectives™ on Stack Overflow

local storage, save css filename through javascript

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related