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。

Answer 2

将;path=/添加到您的cookie中，您可以在不同的页面上使用cookies

this将为您提供更多帮助

Answer 3

您可以使用localStorage。我认为这是首选的方式。

要保存或更新，请使用：

localStorage.setItem('theme','value');

获得价值：

localStorage.getItem('theme');

要清除：

localStorage.clear()

Answer 4

您需要确保其他页面也读取cookie值并相应地更改样式。如果您添加了所有代码，例如使用变量 themeColor 的位，将很有帮助。

我该如何使用Cookie来存储不同的主题颜色，从而使其在网站的所有页面上而不是首页上都发生变化？

4 个答案: