javascript - 如何使用 cookie 存储不同的主题颜色，以便它在我网站上的所有页面(而不仅仅是主页)上发生变化？

Question

我试图将我的主题颜色存储在 cookie 中，因此当我单击按钮时，它会更改我主页上的主题，但不会更改我其他页面的主题。

JavaScript 代码: - 向下滚动以查看新代码。

$(document).ready(function () {
    $("button").click(function () {
        document.cookie = "theme=grey";
        return false;
    });
});


let themeColor = document.cookie;

html 代码:这是在我的母版页上。

    <div id="footer">
      <div id="footer_content">
    <img src="Images/fasthosts2.png" alt="Fasthostslogo" width="150" height="50"  />
          <div class="foot"></div>

  <button> Change Theme</button>

    </div>  
 </div>

链接:

  <script src="ThemeChanger.js"></script>

新的、更好的代码，但仍然不能在所有页面上工作。 JS:

$(document).ready(function () {
    $('#ChangeTheme').click(function () {
        document.body.style.setProperty("--color1", "orange")
        document.body.style.setProperty("--color2", "red")
        document.body.style.setProperty("--color3", "white")
        return false;
    });
});

CSS:

:root {
    --color1: #3366cc;
    --color2: #2d2d2d;
    --color3: white;
}

#header {
    background-color: #3366cc;
    height: 110px;
    position: fixed;
    top: 0;
    width: 100%;
    display: table;
    border-bottom: 5px solid #0099ff;
    border-top: 5px solid #2d2d2d;
    background: linear-gradient(var(--color2), var(--color1));
}

#footer {
    background-color: darkblue;
    height: 150px;
    position: fixed;
    bottom: 0;
    width: 100%;
    border-top: 5px solid #0099ff;
    background: linear-gradient(var(--color1), var(--color2));
}

HTML:

  <asp:Button ID="ChangeTheme" runat="server" Text="Change Theme" Width="110px" CausesValidation="false" BackColor="#99CCFF" BorderColor="#000066" BorderStyle="Solid" />

Answer 1

欢迎来到堆栈溢出

您需要将代码更改为

$("button").click(function () {
    document.cookie = "theme=grey;path=/";
    return false;
});

通过添加 path=/，您可以告诉浏览器在域级别保存 cookie。否则，浏览器将为您单击按钮的特定页面创建 cookie。