需要帮助使CSS文件在Javascript中持久化

Question

我有一个HTML页面，其中有两个CSS文件，一个用于浅色主题，一个用于深色主题。当我点击相应的按钮时，主题变为light.css或dark.css.

然而，如果我重新加载网站，它会回到浅色主题，即使它被设置为黑暗，有没有可能的方法使这个工作的方式，我的意图。

function toggleTheme() {
// Obtains an array of all <link>
// elements.
// Select your element using indexing.
var theme = document.getElementsByTagName("link")[0];
// Change the value of href attribute
// to change the css sheet.
if (theme.getAttribute("href") == "light.css") {
theme.setAttribute("href", "dark.css");
} else {
theme.setAttribute("href", "light.css");
}

Answer 1

您可以这样保存主题到本地存储:

const theme = document.getElementsByTagName('link')[0];
const lightTheme = 'light.css';
const darkTheme = 'dark.css';
const newTheme = theme.getAttribute('href') === lightTheme ? darkTheme : lightTheme;
theme.setAttribute('href', newTheme);
// set new theme as preferred
localStorage.setItem('theme', newTheme);

页面创建后，我们可以检查是否存在首选主题:

const theme = document.getElementsByTagName('link')[0];
const themeValue = localStorage.getItem('theme');
if (themeValue) {
theme.setAttribute('href', themeValue);
}