我是新來(lái)的（通常是編碼），但每個(gè)人都說(shuō)一旦你有問(wèn)題并且無(wú)法在 Stackoverflow 中找到答案，你應(yīng)該問(wèn)，但我總是發(fā)現(xiàn)這個(gè)問(wèn)題可能太愚蠢了。問(wèn)題是，我試圖為明暗模式設(shè)置一個(gè)切換器并且它工作正常，但是一旦你刷新頁(yè)面，主題更改就不會(huì)被保存。我發(fā)現(xiàn)使用 JavaScript，您可以通過(guò)使用“l(fā)ocalStorage.setItem()”在本地存儲(chǔ)該更改，但它并沒(méi)有像我預(yù)期的那樣工作。我將嘗試提供盡可能多的細(xì)節(jié)：我為我的 body 標(biāo)簽創(chuàng)建了兩個(gè) css 類：“dark”和“l(fā)ight”，每個(gè)類都有自己的顏色 css 變量。注意：我沒(méi)有兩個(gè) body 標(biāo)簽，這只是為了顯示我必須在兩個(gè)類之間切換。<body class='light'>(all the content)</body><body class='dark'>(all the content)</body>從一個(gè)到另一個(gè)的更改由帶有 css 類“.slider”的切換器觸發(fā)，每次單擊時(shí)都會(huì)調(diào)用它：const switchBtn = document.querySelector('.slider');switchBtn.addEventListener('click', () => {if(document.body.classList.contains('light')) { document.body.classList.replace('light', 'dark'); } else { document.body.classList.replace('dark', 'light'); }; });直到此時(shí)，一切都從一個(gè)變成了另一個(gè)。最后，我添加了一種嘗試通過(guò)修改/利用（或我認(rèn)為的）以前的功能來(lái)將其存儲(chǔ)在本地的方法：let darkTheme = localStorage.getItem('dark');switchBtn.addEventListener('click', () => { darkTheme = localStorage.getItem('dark'); //Trying update the info stored about the darkTheme if(document.body.classList.contains('light') && darkTheme == null) { document.body.classList.replace('light', 'dark'); localStorage.setItem('darkTheme', 'enabled'); } else { document.body.classList.replace('dark', 'light'); localStorage.setItem('darkTheme', null); }; });此時(shí)，我可以在 Chrome 的應(yīng)用程序 > 本地存儲(chǔ)中看到，每次單擊時(shí)，它都會(huì)更改主題，并且還會(huì)將鍵的值從“已啟用”更改為 null，反之亦然，但是一旦我刷新頁(yè)面，它返回到我的“淺色”主題，盡管該鍵仍處于“啟用”狀態(tài)。事實(shí)上，此時(shí)我可以再次點(diǎn)擊打開深色主題，顯然，鍵的值保持不變；但如果我再次單擊它，如預(yù)期的那樣，它會(huì)返回到空值（淺色模式）。
LocalStorage 沒(méi)有被保存（Vanilla JS）？
慕尼黑5688855
2022-12-29 09:37:09
