CODEWITHSUNDEEP
javascriptcsshtml
JSS_606
JSS_606

Reputation: 1

Using localStorage for switching CSS style sheets with persistence

I am having an issue wherein I am trying to use the localStorage method to store user preferences when switching between two separate style sheets, one blue and one dark.

I just can't get it to function, and I seem to be unable to call the storage function let alone set it.

Here is the javascript and html code.

<head>
<title>Welcome Page</title>
<link id= "pagestyle" rel="stylesheet" type="text/css" href="blue.css" title= "blue"/>
  <link id= "pagestyle" rel="stylesheet" type="text/css" href="../blue.css" title= "blue" />


<link href='http://fonts.googleapis.com/css?family=Ubuntu' rel='stylesheet' type='text/css'>

<script type= "text/javascript">
    function swapstylesheet(sheet) {
        document.getElementById('pagestyle').setAttribute('href',sheet);
    }


    function storebackground(swapstylesheet) {
        localStorage.setItem(swapstylesheet);
    }

    function loadbackground(args) {

        document.getElementById("pagestyle").innerHTML = localStorage.swapstylesheet;
        //code
    }
</script>
<div id ="cssbutton">
    <button id= "blueb"  value = "bluev" class ="css1" onclick = "swapstylesheet('blue.css')">Blue</button>
    <button id= "darkb" value = "darkv" class ="css2" onclick = "swapstylesheet('dark.css')">Dark</button>

Anyone can tell me what I am doing wrong?

Upvotes: 0

Views: 1290

Answers (2)

thenetimp
thenetimp

Reputation: 9820

Don't switch stylesheets. Create 1 stylesheet and give the body a class. This would be done better via less or sass.

body.blue { background-color: #006; }
body.dark { background-color: #000; } 
body.blue a { color: #fff; }
body.dark a { color: #600; }

Then make all your specific changes as sub styles. Store the class in a cookie, or storage and when you load the page check if it exists and add the class to the body.

Upvotes: 1

artm
artm

Reputation: 8584

You didn't show where you're calling loadbackground from but your localStorage code needs to be like below:

 function storebackground(swapstylesheet) {
    localStorage.setItem('sheetKey', swapstylesheet); //you need to give a key and value
 }

 function loadbackground(args) {
    document.getElementById("pagestyle").innerHTML = localStorage.getItem('sheetKey'); //get value by key
    //or document.getElementById('pagestyle').setAttribute('href', localStorage.getItem('sheetKey'));
}

Upvotes: 2

Related Questions