Как я могу использовать куки для хранения другого цвета темы, чтобы он менялся на всех страницах моего сайта, а не только на главной странице?

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

Необходимо убедиться, что другие страницы также читают значение cookie и соответственно изменяют стиль.Было бы полезно, если бы вы добавили весь свой код, например, биты, которые используют переменную themeColor .

Answer 2

добавьте ;path=/ к своим файлам cookie, и вы можете использовать cookies на разных страницах

, это поможет вам больше

Answer 3

Вы можете использовать localStorage.Я думаю, что это предпочтительный способ.

Для сохранения или обновления используйте:

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

Чтобы получить значение:

localStorage.getItem('theme');

Очистить:

localStorage.clear()

Answer 4

Добро пожаловать в переполнение стека

Вам необходимо изменить код на

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

Добавив path=/, вы сообщаете браузеру, что нужно сохранить куки на уровне домена.В противном случае браузер создаст cookie для конкретной страницы, на которой вы нажимаете кнопку.