通过记住用户选择来切换主题?

如何解决通过记住用户选择来切换主题?

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.setItemlocalStoragewindow.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>

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


Selenium Web驱动程序和Java。元素在(x,y)点处不可单击。其他元素将获得点击?
Python-如何使用点“。” 访问字典成员?
Java 字符串是不可变的。到底是什么意思?
Java中的“ final”关键字如何工作?(我仍然可以修改对象。)
“loop:”在Java代码中。这是什么,为什么要编译?
java.lang.ClassNotFoundException:sun.jdbc.odbc.JdbcOdbcDriver发生异常。为什么?
这是用Java进行XML解析的最佳库。
Java的PriorityQueue的内置迭代器不会以任何特定顺序遍历数据结构。为什么?
如何在Java中聆听按键时移动图像。
Java“Program to an interface”。这是什么意思?
Java在半透明框架/面板/组件上重新绘画。
Java“ Class.forName()”和“ Class.forName()。newInstance()”之间有什么区别?
在此环境中不提供编译器。也许是在JRE而不是JDK上运行?
Java用相同的方法在一个类中实现两个接口。哪种接口方法被覆盖?
Java 什么是Runtime.getRuntime()。totalMemory()和freeMemory()?
java.library.path中的java.lang.UnsatisfiedLinkError否*****。dll
JavaFX“位置是必需的。” 即使在同一包装中
Java 导入两个具有相同名称的类。怎么处理?
Java 是否应该在HttpServletResponse.getOutputStream()/。getWriter()上调用.close()?
Java RegEx元字符(。)和普通点?