问题：

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

长孙雅志

2023-03-14

所以，我有一个按钮，在黑暗和光明模式之间切换（我的网站默认是黑暗的），它可以工作，但现在我需要它保持在任何切换状态，在多个页面选择。我怀疑这和会话存储有关。也不想使用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个答案

颛孙越

2023-03-14

您可以使用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值。

类似资料：

仅在移动站点上切换

我做了一个标题，当有人在桌面上访问网站时，他会看到一个导航菜单。当同一个人在他的手机上访问网站时，他首先会看到一份汉堡菜单。当他点击汉堡包菜单时，有一个动画和一个下拉菜单。我能够修复这个代码，但当我访问我的pc上的网站，我点击附近我的头，这个移动的dropdrown菜单将出现... 场地； https://www.spiralex.nl/ 我的汉堡包和下拉代码； null null
如何保持HttpClient连接保持活动状态？

问题内容：我正在使用POST方法。我需要创建一次，并且应该使用Keep Alive Connection。但是我认为，它每次都会建立一个新的连接。因此，我需要使用保持活动连接。这是我的代码段，很多帮助将不胜感激。而且logcat日志是：问题答案： 10：07：29.746：D / org.apache.http.headers（1529）：>>连接：保持活动您正在要求保持活动状态。
在网站上实施OAuth支持

我想扩展我的网站以支持OAuth，以便第三方应用程序可以访问数据并代表网站用户执行操作。我该怎么做？基本上，我想知道如何生成访问令牌和应该完成的数据库设置。
如何使用动态高度网站将页脚保持在底部

问题内容：当我有一个页面可以通过CSS动态设置高度（例如，从数据库获取信息）时，如何将页脚div始终保持在窗口底部？如果您想使用jQuery，我想出了这一点并且效果很好：设置页脚的CSS：设置脚本：该脚本必须位于代码的末尾。问题答案：我相信您正在寻找粘性页脚从上面的文章： layout.css： html页面：
如何在Java中保持graphic2D形状保持一段时间？

我将为我的后期项目创建一个移动的圆圈，圆圈将继续移动，它的内部颜色将像颜色发射一样变化，变化的颜色将在5个级别中从小圆圈到大圆圈，所以如何保持每个颜色的变化保持一段时间，我希望这些代码与线程一起出现，所以我创建了两个线程，一个控制圆圈移动，另一个控制圆圈的内部颜色发射，这里是我的代码：
如何在刷新时保持Redux状态树？

问题内容： Redux文档的第一个原理是：整个应用程序的状态存储在单个存储中的对象树中。我实际上以为我很好地理解了所有原则。但是我现在对应用程序的含义感到困惑。我知道，如果应用程序只是网站中复杂的小部分之一，并且仅用一页即可工作。但是，如果申请意味着整个网站怎么办？我应该使用LocalStorage还是cookie或其他保留状态树的东西？但是如果浏览器不支持LocalStorage怎么办？

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

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档