我想使用本地存储来存储用户选择的主题

Question

下面是Javascript代码，请帮助如何在此使用本地存储。由于

var radios = document.getElementsByName('theme');
Array.from(radios).forEach( (el, i) => {

el.addEventListener('change', e => {
if(e.target.checked) {
let value = e.target.getAttribute('value');
document.querySelector('html').setAttribute('data-theme', value);
document.documentElement.classList.add('in-transition')
window.setTimeout(function() {
document.documentElement.classList.remove('color-theme-in-transition')
}, 1000)

}
});
});

Answer 1

您可以将颜色设置为onclick函数。获取用户选择的颜色后:

function setActiveStyle(color){
var currentColor = color // save the color in a variable to use else where
localStorage.setItem("theme", color) // saves the theme chosen for future reference

你可以使用:

colorChosenByUser = localStorage.getItem("theme")

如果你有很多颜色，你可以遍历它们并禁用它们以使用用户选择的当前主题。所有这些都是假设你的html和css设置正确。

希望对你有帮助。