在 web-pages 的 localStorage 中存储暗模式

Question

致敬！我正在开发一个新博客，正如标题所示，我正在尝试将我的深色模式 style-sheet 存储在 web-pages 的 localStorage 中。目前，如果用户选择深色模式，但随后刷新页面或链接到另一个 web-page，该网站将再次恢复为浅色模式。我希望它记住用户选择的模式（浅色或深色）。这是我当前的 JavaScript 代码：

function swapStylesheet(sheet) {
document.getElementById('swap').setAttribute('href', sheet); 
}

我如何将 localStorage 应用于此代码，以便浏览器记住用户选择的 style-sheet？

非常感谢！

Answer 1

使用 localStorage 相当简单 API。

为了保存到本地存储：

function swapStylesheet(sheet) {
document.getElementById('swap').setAttribute('href', sheet); 
localStorage.setItem('swap', sheet);
}

要从本地存储中检索：

function getLocalStorageSwapStyle(){
let style=localStorage.getItem('swap');
swapStyleSheet(style);
}

您可以随时拨打getLocalStorageSwapStyle。例如：页面加载或某些特定事件。

有关 localStorage API 的更多信息可在此处找到：mdn

在 web-pages 的 localStorage 中存储暗模式

Store dark mode in localStorage across web-pages

javascript

local-storage

darkmode