如何在网站上保持切换状态？

提问者：小点点

如何在网站上保持切换状态？

所以，我有一个按钮，在黑暗和光明模式之间切换（我的网站默认是黑暗的），它可以工作，但现在我需要它保持在任何切换状态，在多个页面选择。我怀疑这和会话存储有关。也不想使用jQuery。我可以在代码中添加什么来实现这一点呢？

我有五个页面都链接到了id为“dark”的styles.css，然后在JS中我引用了第二个样式表light.css或JS中的“light”，所以我要切换样式表。所有五个页面的页脚都有按钮，每个按钮都在一个JS文件中编写了相同的功能。

HTML

<head>
<link rel="stylesheet" href="styles.css" id="dark">
</head>

<body>
<button onclick="toggle();" id="light-mode"><i class="fas fa-adjust"></i></button>
</body>

JavaScript

function toggle() {
    var a = document.getElementById("dark");
    a.x = 'light' == a.x ? 'styles' : 'light';
    a.href = a.x + '.css';
}

这工作得很好，只是不确定如何集成sessionstorage或localstorage来保存跨站点的切换状态。如果可能的话，从这一点出发的最佳方法是什么？或者我应该做一次彻底的检修？

更新

所以，尝试了@Reality的答案，但没有工作，但我想我可能只是整合错了。对JS来说很新鲜。

localStorage.setItem('toggled','true');

function toggle() {
    var a = document.getElementById("dark");
    a.x = 'light' == a.x ? 'styles' : 'light';
    a.href = a.x + '.css';

    if (localStorage.getItem('toggled') === 'false') {
        localStorage.setItem('toggled','true');
    } else {
        localStorage.setItem('toggled','false');
    }
}

已解决

好的，任何想知道如何在您的网站上完美地切换主题的人，只需遵循以下操作:https://dev.to/albertomontalesi/add-dark-mode-to-your-website-with-just-a-few-lines-of-code-5baf

当您遵循这一点，您应该做一个额外的事情，使您的主题加载更好当切换到。只需在每个页面的首页链接到第二个样式表，然后添加disabled=“disabled=”如果不将此添加到上述方法中，我发现当切换到任何主题并在站点周围导航时，您基本上必须加载一个新的样式表，并且您会得到一个闪烁，甚至可以立即看到站点的纯HTML版本，所以此添加修复了此问题，因为将其放在首页中，它从一开始就已经加载了。

最终

以下是最终奏效的方法：

    <head>
        <link rel="stylesheet" href="dark-theme.css" type="text/css" id="theme">
        <link rel="stylesheet" href="light-theme.css" type="text/css" disabled="disabled">
        <script>
            document.addEventListener('DOMContentLoaded', () => {
                const themeStylesheet = document.getElementById('theme');
                const storedTheme = localStorage.getItem('theme');
                    if (storedTheme) {
                        themeStylesheet.href = storedTheme;
                    }
                const themeToggle = document.getElementById('theme-toggle');
                themeToggle.addEventListener('click', () => {
                    if (themeStylesheet.href.includes('dark')) {
                        themeStylesheet.href = 'light-theme.css';
                    } else {
                        themeStylesheet.href = 'dark-theme.css';
                    }
                    localStorage.setItem('theme', themeStylesheet.href);
                });
            });
        </script>
    </head>

根据Per@Reality的建议，将JS放在头部比已解决的编辑建议的操作更能提高性能，然而，在上面的示例中使用的是提供的链接(https://dev.to/albertomontalesi/add-dark-mode-to-your-website-with-just-a-few-lines-of-code-5baf)中的代码（https://dev.to/albertomontalesi/add-dark-mode-to-your-website-with-just-a-few-lines-of-code-5baf)。仍然需要light-theme.css链接中的disabled=“disabled”，否则它将覆盖dark-theme.css和切换将不会同时发生。在这个线程中看到的所有尝试过的代码示例都是如此。

共1个答案

匿名用户

您可以使用localstorage.setitem()；和localstorage.getitem()设置它。

localStorage.setItem('toggled','true');
//or
localStorage.setItem('toggled','false');

在切换函数中：

//get the style by it's id
let a = document.getElementById("dark");
if(localStorage.getItem('toggled') === 'false'){
   //set toggled to true, because the user clicked it when dark theme is on
   localStorage.setItem('toggled','true');
   //toggled is now on, in this case, light theme is switched on
   //do something here
   a.href = "light.css";
}
else{
   //set toggled to false, because the user clicked it when light theme is on
   localStorage.setItem('toggled','false');
   //if toggled is off, in this case, dark theme is switched on
   a.href = "styles.css";
}

一开始似乎很混乱，但只要注意逻辑就行了。当您阅读和重读它时，它将开始在您的脑海中展开：）如果您想要切换到会话存储（对于那个tab实例）。关闭选项卡后，该选项卡的会话存储将被删除），然后将“localStorage”替换为“sessionStorage”。请记住，localStorage和sessionStorage在存储值（将它们转换为字符串）之前要stringfy值。