我正在嘗試在本地存盤我的站點上的暗/亮模式主題，以便每次打開新頁面或重繪 站點時它都不會取消切換。我應該把localStorage.? 還是整個事情都錯了？
const checkbox = document.getElementById('checkbox');
checkbox.addEventListener('change',()=> {
// change theme of website
document.body.classList.toggle('dark');
});
uj5u.com熱心網友回復：
如果你在你的 html 上使用 vanilla javascript，你已經加載了你的腳本，如下所示
<html>
...
<script src='/to/scripts.js'></script>
</body>
</html>
然后您可以添加兩個函式，一個將它們設定為 localStorage，另一個讀取它并使其可訪問。
更新時，更新函式為主題設定新值，讀取時，即使在重繪 /重新加載后，讀取函式也會讀取存盤的值，如下所示
<html>
....
<script>
//for setting
const toggleTheme = () => {
if(localStorage.getItem('theme') === 'dark'){
localStorage.setItem('theme','light')
}else{
localStorage.setItem('theme','dark')
}
}
//for reading
const theme = () => localStorage.getItem('theme') || 'light'
</script>
<script src='/to/scripts.js'></script>
</body>
</html>
uj5u.com熱心網友回復：
編輯（最后一個答案沒有解決問題）
我認為您可以使用DOMContentLoadedevent 來設定主題localStorage，當復選框更改時，您可以在存盤上設定所選主題。這樣當頁面重新加載時，它會尋找主題并設定它，如果沒有設定主題，它會默認為淺色。
這是一個示例：
document.addEventListener("DOMContentLoaded", function(event) {
const theme = localStorage.getItem('theme');
if(theme === undefined) theme = 'light';
document.body.classList.add(theme);
});
const checkbox = document.getElementById('checkbox');
checkbox.addEventListener('change',(e) => {
const theme = e.target.checked ? 'dark' : 'light';
localStorage.setItem(theme);
document.body.classList.add(theme);
});轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/368947.html
標籤：javascript