在2个样式表之间切换，并通过本地存储保持用户偏好
我有两个图像（一个月亮和一个太阳）和两个不同的样式表，用于黑暗和光明页面主题。默认为暗模式。要更改为灯光模式，请单击太阳图像。
我可以在样式表之间切换。但是，我不知道如何存储选择的主题。我希望用户能够保持他们的风格偏好，即使在刷新页面或更改页面（在同一网站上）之后。
我在下面列出了一些代码示例。我希望有人能帮助我理解本地存储。
相关html
<link href="normalize.css" rel="stylesheet" type="text/css">
<link id="theme" rel="stylesheet" type="text/css" href="styles-dark.css" />
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700&display=swap" rel="stylesheet">
<link class="favicon" rel="icon" href="./favicon.ico" />
</head>
<body>
<header id="flex-box-header">
<h1 id="nameHeading">MY NAME</h1>
<!-- 'Dark Mode' will be the default -->
<div class="toggle">
<div class="tooltip">
<img class="displayButton" id="dark" src="moon - light.png" alt="dark mode" width="90.82px" height="76px">
<span class="tooltiptext" id="textDark">Dark Mode</span>
</div>
<div class="tooltip">
<img class="displayButton" id="light" src="sun.jpg" alt="light mode" width="83.56px" height="62.02px">
<span class="tooltiptext" id="textLight">Light Mode</span>
</div>
</div>
</header>
这个JavaScript用于在主题之间切换，但是如何使用本地存储保存用户首选项呢？
// Button selection
const buttonLight = document.getElementById("light");
const buttonDark = document.getElementById("dark");
// Style selection
const lightStyle = "styles-light.css";
const darkStyle = "styles-dark.css";
// Select the stylesheet <link>
const theme = document.querySelector(".theme-link");
// Listen for a click on the sun button (buttonLight)
buttonLight.addEventListener("click", function() {
theme.href = lightStyle;
// different sun for light theme
document.getElementById("light").src = "sun - light.png";
document.querySelector(".favicon").href = "favicon-light.ico";
});
// Listen for a click on the moon button (buttonDark)
buttonDark.addEventListener("click", function() {
theme.href = darkStyle;
// different sun for dark theme
document.getElementById("light").src="sun.jpg";
document.querySelector(".favicon").href = "favicon.ico";
});
JavaScript-尝试使用本地存储和失败
function toggle(theme) {
var styleSheet = document.getElementById("theme");
if (theme != styleSheet.href) styleSheet.href = theme;
document.getElementById("light").src.onClick = styleSheet.href === "styles-light.css";
}
window.addEventListener("click", function() {
var theme = localStorage.getItem("theme") || document.getElementById("theme").href;
toggle(theme);
document.getElementById("light").addEventListener("click", function() {
var theme = this.onClick ? "styles-light.css" : "styles-dark.css"
toggle(theme);
localStorage.setItem("theme", theme);
})
})
共有1个答案
我终于明白了！它有FOIT（不正确主题的闪光），但我只是松了一口气，用户的偏好正在保存。改天我会致力于消除FOIT。
JavaScript
// Button selection
const buttonLight = document.getElementById("light");
const buttonDark = document.getElementById("dark");
// Style selection
const lightStyle = "styles-light.css";
const darkStyle = "styles-dark.css";
// Select the stylesheet <link>
const theme = document.getElementById("theme");
function lightFunction() {
theme.href = lightStyle;
// different sun for dark theme
document.getElementById("light").src="sun - light.png";
document.querySelector(".favicon").href = "favicon-light.ico";
window.localStorage.setItem('theme', 'light');
}
function darkFunction() {
theme.href = darkStyle;
// different sun for dark theme
document.getElementById("light").src="sun.jpg";
document.querySelector(".favicon").href = "favicon.ico";
window.localStorage.setItem('theme', 'dark');
}
// Listen for a click on the sun button (buttonLight)
buttonLight.addEventListener("click", lightFunction);
// Listen for a click on the moon button (buttonDark)
buttonDark.addEventListener("click", darkFunction);
const currentTheme = localStorage.getItem("theme");
if (currentTheme == "dark") {
darkFunction();
} else {
lightFunction();
}
-
我有一个网站，它包括index.html和style.css和images文件夹。并且，我想在我的网站的主页面上创建一个按钮“切换到另一个主题”（所以index.html)，它将在两个CSS之间切换。你能告诉我吗： > 是否需要有两个css，如-style1.css和style2.css？ 我是否需要有2个索引页 a）link href=“css/style1.css”rel=“styleshee
-
问题内容： 我想通过单击JPanels上的按钮在JPanels之间切换。 例如：我有一个带有JButton simknop的JPanel sim和一个带有JButton helpknop的JPanel帮助，我想通过单击按钮在这两个JPanel之间进行切换。当我单击JButton simknop时，应显示JPanel帮助；当我单击JButton帮助时，应显示JPanel sim。 您可以在下面找到不
-
我有一个带有多个面板的JFrame类，我通过使用paintComponent（graphics g）方法绘制所有的图形，因此使用CardLayout没有任何用处。要切换帧，我只需点击一个按钮，比如回车，但问题是，当我切换面板时，paintCompenent中剩下的图形仍然存在。我还尝试使用panel.setvisible（false）使面板可见，这有点帮助，只是我要转换到的面板仍然不可见，即使在将
-
主要内容：本节引言：,1.SharedPreferences使用示例：,2.读取其他应用的SharedPreferences,3.使用MD5对SharedPreference的重要数据进行加密,4.SharedPreference工具类：,5.代码下载：,本节小结：本节引言： 本节给大家介绍的是第二种存储用户数据的方式，使用SharedPreferences(保存用户偏好参数)保存数据， 当我们的应用想要保存用户的一些偏好参数，比如是否自动登陆，是否记住账号密码,是否在Wifi下才能 联网等相关
-
切换样式列表 点击列表样式按钮，切换场景列表样式
-
所以这里我有通过本地存储令牌的登录功能。我在开发工具/应用程序中创建用户时获得令牌，它将我重定向到正在工作的家庭。不起作用的是这个。创建一个用户，它正在工作，但当它加载时，它应该显示logout而不是login，并且应该隐藏购物车组件。我在哪里犯了一个错误上下文Api 登录链接 标题 登录组件