如何使用本地存储来保存用户的主题偏好？

Question

我正在使用以下代码在深色和浅色主题之间切换。 我正在尝试将用户的首选主题保存到本地存储中，因此当他们重新访问/重新加载时，他们不必切换开关。 而且，我还希望它保留在他们在我的网站中访问的其他页面上。 我已经尝试了一切，但无法让它工作。 如果有人可以提供帮助，我将不胜感激。 提前致谢。

 // JavaScript Document const currentTheme = localStorage.getItem('data-theme'); var checkbox = document.querySelector('input[name=mode]'); checkbox.addEventListener('change', function() { if(this.checked) { trans() document.documentElement.setAttribute('data-theme', 'dark'); localStorage.setItem('data-theme'); localStorage.currentTheme = ("dark", true); } else { trans() document.documentElement.setAttribute('data-theme', 'light'); localStorage.setItem('data-theme'); localStorage.currentTheme = ("light", false); } }); let trans = () => { document.documentElement.classList.add('transition'); window.setTimeout(() => { document.documentElement.classList.remove('transition'); }, 1000) }

 html, body { width: 100vw; background: var(--lightBg); } html[data-theme='dark'] { background: var(--lightBg); color: var(--textColor); --lightBtn: rgba(244, 244, 244, 0.4); --lightBg: linear-gradient(#000, #0A2028); --lightColor: #fff; --textColor: #f4f4f4; --cardBg: #f4f4f4; --cardColor: #0A2028; }

 <html lang="en"> <body> <div class="container"> <input class="container_toggle" type="checkbox" id="switch" name="mode"> <label class="switch_label" for="switch">Toggle</label> </div> </body> </html>

Answer 1

您忘记将值传递给 setItem function 的第二个参数

   exmple: localStorage.setItem('key',value);
   localStorage.setItem('dark',true);

如何使用本地存储来保存用户的主题偏好？

问题描述

1 个解决方案

解决方案1
0 2022-08-20 12:38:58

如何使用本地存储来保存用户的主题偏好？

问题描述

1 个解决方案

解决方案1 0 2022-08-20 12:38:58

解决方案1
0 2022-08-20 12:38:58