如何在切换页面或重新加载时保存选择的主题(html/css/js)？

Question

我没有在我的代码中使用切换功能。单击发生时，我刚刚切换了样式表。但是，如果我在页面之间切换或刷新页面，它只会返回到其默认样式表。

当我刷新页面时，它恢复到默认的“关闭”模式。

如何在页面刷新和切换 HTML 页面时保存它的位置？也请分享代码。

谢谢

Answer 1

查询已解决。这里我没有改具体的class或属性，直接改了stylesheet.

const theme = document.querySelector("#theme-link");  //ID to be added in stylesheet link
const btn = document.querySelector("#checkbox"); 
const btnValue = localStorage.getItem("themeBtn");
if (btnValue === null || btnValue === "null") {
    localStorage.setItem("themeBtn", btn.checked);
    applyTheme(localStorage.getItem("themeBtn"));}
if (btnValue === "true" || btnValue === "false") {
    applyTheme(btnValue);}
btn.addEventListener("change", () => {
    localStorage.setItem("themeBtn", btn.checked);
    applyTheme(localStorage.getItem("themeBtn"));
});

function applyTheme(value) {
    if (value === "true") {
        theme.href = "/css/light-theme.css";
        btn.checked = true;
    } else if (value === "false") {
        theme.href = "/css/style.css";
        btn.checked = false;
    }
 }

如何在切换页面或重新加载时保存选择的主题(html/css/js)？

How to save the selected theme when I switch pages or reload( html/css/js)?

html

javascript

css

themes

toggle