Question

我一直在开设一个网站，指导我的同行如何在他们提供的Windows 10设备上使用许多自定义功能和软件。

我正在尝试为网站添加一个黑暗的主题，大部分工作都在那里，但我在使用Cookie时遇到问题，以便在整个网站和多个会话中保持主题选择。我的问题是，访问网页会添加一个cookie以启用黑暗主题，但最初应该没有cookie。

我的意图是，当黑暗主题没有cookie时，网站默认为灯光主题。此外，如果黑暗主题有一个cookie，当用户点击灯光主题的按钮时，应该删除黑暗主题的cookie。

通过制作这个网站的过程，我学到了很多东西，但是我被这个问题困扰了。我做错了什么导致cookie被卡住theme=dark？

在页面加载时恢复主题的脚本：

function restoreTheme(){
    if(document.cookie="theme=dark") {
        darkTheme();
    } else {
        lightTheme();
    }
}

更改主题的脚本：

function darkTheme() {
        document.body.style.setProperty("--sideNavBackground", "rgb(33,33,33)");
        document.body.style.setProperty("--bodyBackgroundColor", "rgb(17,17,17)");
        document.body.style.setProperty("--sideNavItemBackgroundHover", "rgb(64,64,64)");
        document.body.style.setProperty("--bodyTextColor", "rgb(238,238,238)");
        document.cookie="theme=dark";
        document.cookie = "theme=light; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
    }
    function lightTheme() {
        document.body.style.setProperty("--sideNavBackground", "rgb(230,230,230)");
        document.body.style.setProperty("--bodyBackgroundColor", "rgb(255,255,255)");
        document.body.style.setProperty("--sideNavItemBackgroundHover", "rgb(199,199,199)");
        document.body.style.setProperty("--bodyTextColor", "rgb(17,17,17)");
        document.cookie="theme=light";
        document.cookie = "theme=dark; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

    }

改变主题的按钮：

<form>
        <input name="theme" type="submit" class="theme_b" id="dark" onclick="darkTheme()" value="Dark Theme">
        <input name="theme" type="submit" class="theme_b" id="light" onclick="lightTheme()" value="Light Theme">
    </form>

作为参考，这里是（大部分）完整页面的代码集：https://codepen.io/jackemery2001/pen/LrPvEJ/

Answer 1

糟糕！

function restoreTheme(){
if(document.cookie="theme=dark") {
    darkTheme();
} else {
    lightTheme();
}

}

document.cookie =“theme = dark”需要更改为document.cookie ==“theme = dark”

Answer 2

根据@Erich Brahmin和@CBroe的建议，我能够解决这个问题。

我将function restoreTheme()更改为

function restoreTheme() {
        var theme = getCookie("theme");
        if (theme=="dark") {
            //alert("dark");
            darkTheme();
        } else {
            //alert("light");
            lightTheme();
        }
    }

并在头部为getCookie（）添加了一个脚本：

function getCookie(cname) {
        var name = cname + "=";
        var decodedCookie = decodeURIComponent(document.cookie);
        var ca = decodedCookie.split(';');
        for(var i = 0; i <ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') {
                c = c.substring(1);
            }
            if (c.indexOf(name) == 0) {
                return c.substring(name.length, c.length);
            }
        }
        return "";
    }

简单地将document.cookie =“theme = dark”更改为document.cookie ==“theme = dark”并不完全有效，因为只有在没有其他cookie的情况下它才有效。

function restoreTheme(){
if(document.cookie="theme=dark") {
    darkTheme();
} else {
    lightTheme();
}

可以在https://codepen.io/jackemery2001/pen/LrPvEJ

看到工作修复

Cookie不会删除或更改

2 个答案: