如何将深色模式偏好保存至LocalStorage实现跨页持久化？

我已经实现了深色模式切换按钮，但页面跳转或刷新后会恢复为浅色模式。尝试用LocalStorage保存设置但未生效，希望实现深色模式选择的跨页持久化。当前代码如下：

原JavaScript代码 #

let trilho = document.getElementById('trilho')
let body = document.querySelector('body')

trilho.addEventListener('click', ()=>{
    trilho.classList.toggle('dark')
    body.classList.toggle('dark')

})

原CSS代码 #

*{
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;
}

body {
    height: 100px;
    width: 100%;
    background-color: #fafafa;
}

/* DARK MODE */
.trilho {
    width: 70px;
    height: 30px;
    background-color: #6e6d6d;
    border-radius: 70px;
    position: relative;
    cursor: pointer;
}

.trilho .indicador {
    width: 30px;
    height: 30px;
    background-color: #000;
    border-radius: 50%;
    transform: scale(.8);
    position: absolute;
    left: 0;
    transition: .5s;
}

.trilho.dark {
    background-color: #c3c3c3;
}

.trilho.dark .indicador {
    left: 38px;
    background-color: #fff;
}

body.dark .container {
    background-color: #000;
}

body.dark footer {
    background-color: #000;
}

body.dark header {
    background-color: #000;
}

body.dark h1 {
    color: #fff;
}

body.dark a {
    color: #fff;
}

body.dark form{
    box-shadow: none;
}

body.dark .rodape{
    color: #fff;
}

原HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Website</title>

    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script src="darkmode.js" async></script>

</head>

<body>

    <header>     
        <nav>        
         <ul class="nav-links">
             <li><a href="/">link</a></li>
             <li><a href="/">link</a></li>
             <li><a href="#">link</a></li>
        </ul>    


      
          <div class="menu-hamb-button hide-on-desktop">
            <div class="btn-line"></div>
            <div class="btn-line"></div>
            <div class="btn-line"></div>
        </div>
       
        </nav>   

        <div class="trilho" id="trilho">
            <div class="indicador"></div>
        </div>
 
    </header>

    <div class="container">
         <h1>Website</h1>
    </div>
    <footer>

    <span class="rodape">Website</span>      
    </footer>

</body>
</html>

解决方案 #

要实现深色模式的跨页持久化，需要在切换模式时将状态存入LocalStorage，并在页面加载时读取该状态并应用。修改后的JavaScript代码如下：

let trilho = document.getElementById('trilho')
let body = document.querySelector('body')

// 页面加载时读取LocalStorage中的深色模式状态
const isDarkMode = localStorage.getItem('darkMode') === 'true';

// 如果之前开启了深色模式，直接恢复状态
if (isDarkMode) {
    trilho.classList.add('dark');
    body.classList.add('dark');
}

// 切换按钮点击事件
trilho.addEventListener('click', () => {
    // 切换元素的深色模式类
    const isNowDark = trilho.classList.toggle('dark');
    body.classList.toggle('dark');
    
    // 将当前状态存入LocalStorage，确保跨页/刷新后能读取
    localStorage.setItem('darkMode', isNowDark.toString());
});

代码说明 #

1. 页面初始化：页面加载时直接读取LocalStorage中保存的darkMode状态，若为开启状态则立即给对应元素添加dark类，恢复用户之前的选择。
2. 切换逻辑优化：点击切换按钮时，先切换元素的类，再将当前的深色模式状态（转为字符串后）存入LocalStorage，保证状态能被持久化保存。

HTML和CSS代码无需修改，保持原样即可。

内容的提问来源于stack exchange，提问作者Kay8