时间戳

首页 > 解决方案 > Cookie not deleting or changing

javascript - Cookie not deleting or changing

问题描述

I have been working on a site that instructs my peers on how to use many of the customization features and software on their provided Windows 10 devices.

I am trying to add a dark theme to the site, and most of the work is there, but I am having trouble with using cookies to allow the theme selection persist throughout the website and multiple sessions. My issue is that visiting the webpage adds a cookie to enable the dark theme, but there should be no cookie initially.

My intent is for the website to default to the light theme when there is no cookie for the dark theme. In addition, if there is a cookie for the dark theme, when the user clicks the button for the light theme, the cookie for the dark theme should be deleted.

Through the process of making this website, I have been learning a lot, but I have been stumped by this issue. What am I doing wrong that causes the cookie to be stuck as theme=dark?

Script to restore the theme on page load:

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

Script for changing theme:

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=/;";

    }

Buttons to change theme:

<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>

For reference, here is a codepen of the (mostly) complete page: https://codepen.io/jackemery2001/pen/LrPvEJ/

标签： javascriptcookies

解决方案

使用@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看到工作修复

推荐阅读