如何确保网站在重新加载时记住用户的主题

Question

我正在使用 MongoDB、EJS 和 Node JS 创建这个 ToDo 应用程序。 我面临的问题是我包含的主题转换器按钮。 当我按下它时，一切都会改变 colors 。 但由于每当将新项目添加到数据库时，我的页面都会重新加载，导致主题从 go 恢复为默认 colors。有没有办法让网站记住用户的选择？ 这是我的代码：

JS部分

const theme_btn = document.getElementById("theme");

const h1_tag = document.querySelector(".title");
const drag_drop_tag = document.querySelector(".drag_drop");

const input_box_tag = document.querySelector(".user_input_box");
const check_mark_tag = document.querySelectorAll(".check_mark");
const userInput_form_tag = document.querySelector(".userInput_form input");

const list_display_tag = document.querySelector(".list_display");
const item_display_tag = document.querySelectorAll(".item_display");
const item_content_tag = document.querySelectorAll(".item_content");

const statues_tag = document.querySelector(".statues");

theme_btn.addEventListener("click", () => {
    if(theme_btn.src.includes("sun") === true) {
        theme_btn.src = "../images/icon-moon.svg"

        document.body.classList.add("light_body");  
        h1_tag.classList.add("light_header");   
        drag_drop_tag.classList.add("light_drag-drop"); 
        
        input_box_tag.classList.add("light_input_box"); 
        check_mark_tag.forEach(item => {
            item.classList.add("light_check_mark"); 
        })
        userInput_form_tag.classList.add("light_userInput_form"); 

        list_display_tag.classList.add("light_list_display"); 
        item_display_tag.forEach(item => {
            item.classList.add("light_item_display"); 
        })
        item_content_tag.forEach(item => {
            item.classList.add("light_item_content"); 
        })
        
        statues_tag.classList.add("light_statues"); 
        
    } else if(theme_btn.src.includes("moon") === true) {
        theme_btn.src = "../images/icon-sun.svg"

        document.body.classList.remove("light_body"); 
        h1_tag.classList.remove("light_header");   
        drag_drop_tag.classList.remove("light_drag-drop");  

        input_box_tag.classList.remove("light_input_box"); 
        check_mark_tag.forEach(item => {
            item.classList.remove("light_check_mark"); 
        }) 
        userInput_form_tag.classList.remove("light_userInput_form"); 

        list_display_tag.classList.remove("light_list_display"); 
        item_display_tag.forEach(item => {
            item.classList.remove("light_item_display"); 
        })
        item_content_tag.forEach(item => {
            item.classList.remove("light_item_content"); 
        }) 

        statues_tag.classList.remove("light_statues"); 
    }
})

实时链接： https://todo-remainder-app.herokuapp.com/ Github 链接： https://github.com/StormKing969/ToDo-App

谢谢您的帮助

Answer 1

2个可能的选择

1. 按照 @mr-polywhirl 的建议将主题存储在本地存储或 cookie 中。 每当您的页面加载时，检查 localstorage/cookie 以查看该值是否存在。

2. 更改您的设计，以便将新项目添加到数据库是一个异步请求（这意味着页面不会重新加载）