存储用户选择的CSS样式与本地存储（如何？）

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.

用户可以通过单击链接在4种不同的主题(4种不同的CSS文件)中进行选择。用户选择应该在本地存储中保存(并以某种方式通过粗体选择),然后在用户打开网页时加载所选择的CSS样式。选择应存储至少一周。

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.

我对本地存储完全不熟悉所以我不确定应该如何解决这个问题。据我所知,localStorage.setItem,localStorage.getItem和onChange()应该包含在某处并以某种方式。所有代码都应该是javascript,而不是jQuery。

HTML

<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>

Javascript (that lets the user change CSS-file)

Javascript(允许用户更改CSS文件)

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');
});

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.

有关代码如何使事情有效的任何建议吗?我的主要问题是创建使本地存储工作的代码,因此这是最高优先级。但是通过javascript选择的CSS文件也会很棒。

2 个解决方案

#1

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

您只需将工作表保存在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.

查看DOMContentLoaded事件的文档。

#2

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

注1:我没有更改html代码,因此与上面的问题相同

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.

注意2:现在还有另一个问题,除非用户选择主题,否则根本不加载css文档。这不好,因此如果用户没有选择主题,则默认情况下需要加载css文件。这仍有待解决。

#1