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

Question

I am trying to store my theme colour in a cookie so when i click a button it changes the theme on my homepage but it doesn't change it for my other pages.

JavaScript code: - scroll down to see the new code.

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


let themeColor = document.cookie;

html code: this is on my master page.

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

links:

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

New and better code but still doesn't work on all pages. 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

Welcome to stack overflow

You need to change your code to

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

By adding path=/ you tell the browser to save the cookie on domain level. Otherwise the browser will create the cookie for the specific page you are clicking button on.

Answer 2

add ;path=/ to your cookies and you can use cookies on different pages

this will help you more

Answer 3

You can use localStorage . I think its the preferred way to go.

To save or update use :

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

To get the Value:

localStorage.getItem('theme');

To clear:

localStorage.clear()

Answer 4

You need to make sure that the other pages also read the cookie value and change the style accordingly. It would be helpful if you added all of your code, like the bits that use the variable themeColor .