如何解决通过记住用户选择来切换主题?
const theme = document.querySelector(':root');
const btns = document.querySelectorAll('.colors');
btns.forEach(function(btn){
btn.addEventListener("click",function(e){
const color = e.currentTarget.classList;
if(color.contains("green")){
theme.style.setProperty("--color","#47A846");
}
else if(color.contains("grey")){
theme.style.setProperty("--color","#6C757D");
}
else{
theme.style.setProperty("--color","#F26B38");
}
});
});
我有一个颜色列表,单击它会更改网站上文本、悬停等的颜色。但是当您重新加载时,或者当您转到另一个页面时,我选择的颜色不会被保存。好像是使用localStorage完成的,但是我不明白如何实现它。 网站链接:Click
解决方法
您可以使用window.localStorage.setItem
在localStorage
和window.localStorage.getItem
中设置主题来获取项目。 codepen
记得用 name
设置主题并用相同的 name
检索。
出于安全原因,它不会显示以下代码的结果
const colorInput = document.querySelector("input");
const div = document.querySelector("div");
function changeTheme(color) {
div.style.backgroundColor = color;
}
// Get local storage color
const color = window.localStorage.getItem("theme");
if (color) {
changeTheme(color);
}
colorInput.addEventListener("change",e => {
const color = e.target.value;
changeTheme(color);
// Set local storage color.
window.localStorage.setItem('theme',color);
})
div {
padding: 1rem;
}
<input type="color" />
<div>Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,sunt in culpa qui officia deserunt mollit anim id est laborum.</div>