Как сделать, чтобы при обновлении страницы стили css, заданные с помощью js, не исчезали?

Question

[atumbochka]

На странице я сделал кнопку, переключающую бэкграунд чёрный/белый:

const theme = document.querySelector(".theme")

theme.onclick = () => {
    if (document.body.style.background == "black") {
        document.body.style.background = "white"
        localStorage.setItem("changeTheme", [0, 1])
    } else {
        document.body.style.background = "black"
        localStorage.setItem("changeTheme", [1, 0])
    }
}

При чём, как видно, я хочу, чтобы при изменении темы на данной странице она изменялась и на других тоже. Так и происходит: я кликаю на кнопку (когда у меня белый фон), он сменяется на чёрный на этой и всех других страницах, но возникает проблема. При обновлении страницы с переключателем фон изменяется снова на стандартный (белый), а на других страницах он как был чёрным, так и остался. Как можно, скажем так, зафиксировать стиль?

Answer 1

[Талян]

Вы должны при каждом открытии страницы брать значение из localstorage, и на основании значения менять фон.
У вас же фон меняется только по клику.

Comments

[atumbochka]

Большое спасибо, помогло!

Answer 2

[Алексей Уколов]

Вы уже его фиксируете, записывая в LocalStorage. Просто используйте эту информацию при загрузке страницы.