javascript - 使用本地存储存储用户选择的 CSS 样式(如何？)

Question

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

我对本地存储完全陌生，所以我不确定应该如何处理这个问题。据我了解， localStorage.setItem 、 localStorage.getItem 和 onChange() 应该以某种方式包含在某个地方。 所有代码都应该使用 javascript，而不是 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>

对于如何使代码正常工作有什么建议吗？我的主要问题是创建使本地存储正常工作的代码，因此这是重中之重。但是通过 JavaScript 选择所选的 CSS 文件也很棒。

Answer 1

您只需将sheet保存在changeCSS()中即可:

localStorage.setItem('sheet', sheet);

然后将其应用于页面加载。所以类似

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

查看 DOMContentLoaded 的文档事件。