当单击另一个选项卡（链接）并且用户留在同一页面上时，如何防止 CSS 发生变化？

Question

我做了一个按钮，当它被点击时，我网站的 colors 会改变（工作正常）。 但是，当单击链接或刷新页面时，它不会保存新的 css 颜色值，它只会 go 回到默认的页面外观。 请让我知道如何保存这些值，以便在页面刷新或单击选项卡时不会更改。 感谢您提供的任何帮助:)

谢谢！！

function toggleDarkLight(event) {
  var body = document.getElementById("body");
  var currentClass = body.className;
  body.className = currentClass == "dark-mode" ? "light-mode" : "dark-mode";
 }

<body id="body" class="light-mode">
<button type="button" name="dark_light" onclick="toggleDarkLight()" title="Toggle dark/light mode">dark</button></body>

Answer 1

你应该使用 localStorage

document.body.onload=function(){
        var mode = localStorage.getItem("mode")=="" ? mode="light-mode" :  mode=localStorage.getItem('mode');
        var body = document.getElementById("body");
        body.className = mode;
    }

    function toggleDarkLight(event) {
        var body = document.getElementById("body");
        var currentClass = body.className;
        body.className = currentClass == "dark-mode" ? "light-mode" : "dark-mode";
        localStorage.setItem("mode",body.className)
    }

当单击另一个选项卡（链接）并且用户留在同一页面上时，如何防止 CSS 发生变化？

问题描述

1 个解决方案

解决方案1
1 2019-09-23 21:44:00

当单击另一个选项卡（链接）并且用户留在同一页面上时，如何防止 CSS 发生变化？

问题描述

1 个解决方案

解决方案1 1 2019-09-23 21:44:00

解决方案1
1 2019-09-23 21:44:00