通过记忆用户选择来切换主题？

Question

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完成的，但我不明白如何实现它。站点链接：点击

Answer 1

可以使用window.localstorage.setitem设置localstorage中的主题，并使用window.localstorage.getitem来获取该项。码本

记住使用name设置主题，并使用相同的name进行检索。

出于安全原因，它不会显示下面代码的结果

null

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>