如何使用本地存储？

Question

我本地实验的管理面板有一个“夜间模式”开关，打开它后，将管理面板的常规样式更改为夜间模式样式。下面是脚本的简化版本。如何正确使用 localStorage JavaScript 属性来存储当前的夜间模式设置？

function nightmode() {
    let nbtn = document.getElementById("nightmode");
    let head = document.getElementById("header");
    let cont = document.getElementById("content");
    
    cont.classList.toggle("nightmode");
    
    if(nbtn.innerHTML === "<span><i class=\"fa fa-sun-o\"></i></span>") {
        nbtn.innerHTML = "<span><i class=\"fa fa-moon-o\"></i></span>";
        head.style.cssText = "background-color:black; border-color:black; box-shadow:0 0 10px #000;";
    } else {
        nbtn.innerHTML = "<span><i class=\"fa fa-sun-o\"></i></span>";
        head.style.cssText = "background-color:none; border-color:none; box-shadow:none;";
    }
}

到目前为止我运气不好。

Answer 1

您可以使用localStorage.setItem('nightMode', true);设置键值对。

您可以使用localStorage.getItem(nightMode);获取键的值。
您可以使用 const nightModeBool = localStorage.getItem('nightMode');
将其存储到变量中要从本地存储中删除项目，请使用 localStorage.removeItem('nightMode');
要清除本地存储，请使用 localStorage.clear();

您设置的 cookie 无法从其他网站或 URL 访问，只能从设置 cookie 的网站访问。

更多详情：MDN Reference

如何使用本地存储？

How to use localStorage?

javascript

cookies

local-storage