如何使用本地存储实现保存深色主题？

Question

我正在尝试实现一个深色主题，一旦用户刷新页面或关闭浏览器，它将保留该设置，直到用户决定更改它。我将如何使用本地存储来实现它？我从来没有使用过它。非常感谢您的帮助！

function change() {
  var element = document.body;
  element.classList.toggle("dark-mode");
} 

body{background:white; color:black; transition:0.3; }

.dark-mode{color:white; transition:0.3s; background:black;}

<button onclick="change()">dark</button>

<p>Some text</p>

Answer 1

就像 Mohit/ikiK 说你需要使用条件并检查浏览器 localStorage，记住：

localStorage.getItem(keyName)：获取存储在浏览器存储中的值
localStorage.setItem(keyName, value)：设置值到浏览器存储
/p>

Answer 2

你从来没有用过它的事实不是不尝试的借口，只是说下次......

文档和使用非常简单。

    function change() {
      var element = document.body;
      element.classList.toggle("dark-mode");
    
      if (element.classList.contains("dark-mode")) {
     //if class was added to body
        localStorage.setItem("background", "dark-mode");
     //save information in "background" localStorage variable, use dark-mode class name
      } else {
        localStorage.setItem("background", "");
    //if class was removed set background" localStorage variable to null
      }
    }
    
    document.addEventListener("DOMContentLoaded", function(event) {
//when loading document
      var background = localStorage.getItem("background");
    // get localStorage var background
      if (background) {
    // if its not null and empty
        document.body.className += background;
    //add class to body
      }
    });