使用本地存储存储用户选择的CSS样式(如何?) [英] Store users choice of CSS-style with local storage (How?)

问题描述

用户可以通过单击链接在4个不同的主题(4个不同的CSS文件)之间进行选择.用户的选择应该保存在本地存储中(例如以粗体显示)，然后在用户打开网页时加载所选的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.

我对本地存储是完全陌生的，因此我不确定应该如何处理.据我了解， localStorage.setItem ， localStorage.getItem 和 onChange()应该包含在某个地方.所有代码都应使用javascript，而不能使用jQuery.

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

<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文件也是很好的选择.

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.

推荐答案

我设法解决了我的问题！认为这可能对我以外的人有用，所以在这里是这样的:

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

注1:我没有更改html代码，所以与上面的问题相同

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

这篇关于使用本地存储存储用户选择的CSS样式(如何?)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！