Question

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

我对本地存储完全陌生，所以我不确定应该如何解决这个问题。据我了解，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（允许用户更改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');
});

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

Answer 1

您可以将sheet保存在changeCSS()：

中

localStorage.setItem('sheet', sheet);

然后将其应用于pageload。像

这样的东西

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

查看DOMContentLoaded事件的文档。

Answer 2

我设法解决了我的问题！认为这可能对我而言非常有用，所以在这里它是：

<强>的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"));
};

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

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

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

2 个答案: