Cookie 以记住 css 样式表首选项

Question

我需要制作一个 cookie 来记住 css 样式表首选项。

我将样式表切换为：

function swapStylesheet(sheet){

    document.getElementById('pagestyle').setAttribute('href', sheet);

}

并从按钮调用它：

<a button class="Button" onclick="swapStylesheet('DayStyle.css')">Light</a>
        
<a button class="Button" onclick="swapStylesheet('NightStyle.css')">Dark</a>

因此它将 href 更改为选择的 css 文件，但在刷新时它会更改回默认值。 有什么方法可以创建一个cookie来记住href首选项？ 它可以适用于所有网站吗？

Answer 1

您可以使用浏览器的 localStorage，因为 cookie 的使用主要是为了读取服务器端的数据（但如果您真的想要，您仍然可以使用 cookie）。

显然，您也可以使用 sessionStorage，尽管在选项卡/浏览器关闭后首选主题将不可用，因为顾名思义，会话关闭时不会保留 sessionStorage。 这将违背记住用户偏好的目的。

使用 localStorage 的方法：

当用户选择样式时，您可以：

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

当最初加载页面时，您可以使用<body onLoad ="checkLS()">函数来检查是否设置了 localStorage 并应用样式：

function checkLS () {
    let sheet = localStorage.getItem('stylesheet');
    if (sheet) {
        swapStylesheet(sheet){
    };
}

这样，即使浏览器在访问之间关闭，也会自动设置用户首选的样式表/主题。