CODEWITHSUNDEEP
javascripthtmllocal-storage
Isus
Isus

Reputation: 143

Store users choice of CSS-style with local storage (How?)

The user can choose between 4 different themes (4 different CSS-files) by clicking links. The users choice should be saved (and somehow selected by being bold for example) in local storage and the chosen CSS-style should then be loaded when the user opens up the webpage. The choice should be stored for at least a week.

I am completely new to local storage so I am uncertain of how I should approach this. As far as I understand, localStorage.setItem, localStorage.getItem and onChange() should be included somewhere and somehow. All code should be in javascript, and no jQuery. HTML

    function changeCSS(sheet) {
       document.getElementById('stylesheet_1').setAttribute('href', sheet);
    }
    
    var stylesheets = document.getElementsByClassName("left_sub8");
    
    stylesheets[0].addEventListener("click", function(){
       changeCSS('inlamning7_utseende1.css');
    });
    stylesheets[0].addEventListener("click", function(){
       changeCSS('inlamning7_utseende2.css');
    });
    stylesheets[0].addEventListener("click", function(){
       changeCSS('inlamning7_utseende3.css');
    });
    stylesheets[0].addEventListener("click", function(){
       changeCSS('inlamning7_utseende4.css');
    });
    <a class="left_top">Personligt utseende</a><br>
                <div class="left_submenu_8" style="display: none;">
                <a id="style_1" class="left_sub8" value="inlamning7_utseende1">Default</a><br>
                <a id="style_2" class="left_sub8" value="inlamning7_utseende2">Dark</a><br>
                <a id="style_3" class="left_sub8" value="inlamning7_utseende3">Pastell</a><br>
                <a id="style_4" class="left_sub8" value="inlamning7_utseende4">Gray</a><br>

Any suggestions of how the code would look like to make things work? My main problem is to create code that makes the local storage work, so that´s the top-priority. But have the chosen CSS-file being selected through javascript would be great as well.

Upvotes: 2

Views: 2241

Answers (2)

Isus
Isus

Reputation: 143

I managed to solve my problem! Thought this might be useful to other than just me so here it is:

Javascript

function changeCSS(sheet) { 
     document.getElementById('active_stylesheet').setAttribute('href', sheet);
     localStorage.setItem('sheet', sheet);
}

var stylesheets = document.getElementsByClassName("left_sub8");

stylesheets[0].addEventListener("click", function(){
     changeCSS('inlamning7_utseende1.css');
});
stylesheets[1].addEventListener("click", function(){
     changeCSS('inlamning7_utseende2.css');
});
stylesheets[2].addEventListener("click", function(){
     changeCSS('inlamning7_utseende3.css');
});
stylesheets[3].addEventListener("click", function(){
     changeCSS('inlamning7_utseende4.css');
});

window.onload=function() {
     document.getElementById('active_stylesheet').setAttribute("href", localStorage.getItem("sheet"));
};

Note 1: I did not change the html-code so that is the same as in the question above

Note 2: There is another problem now, which is unless the user chooses a theme, no css-document is loaded at all. This is not good, so a css-file needs be loaded by default if no theme is selected by the user. This remains to be solved.

Upvotes: 1

Lux
Lux

Reputation: 18240

You can just save the sheet in your changeCSS():

localStorage.setItem('sheet', sheet);

And then apply it on pageload. So something like

document.addEventListener("DOMContentLoaded", function(event) {
    changeCSS(localStorage.getItem('sheet'));
});

Checkout the documentation for the DOMContentLoaded event.

Upvotes: 2

Related Questions