如何保存 cookies 以进行暗模式和亮模式切换？

Question

我不太清楚如何将暗/亮模式的选择保存为 cookie。

这是我正在尝试的网页： https://schooloffish.info/index.html

尝试了 cookies 的 w3schools 代码，但我无法让它工作。 任何帮助表示赞赏。

Answer 1

使用document.cookie ：

// inside your event listener on the dark mode toggle:
document.cookie = "darkMode=true";

然后，您可以使用诸如getCookie()之类的股票助手 function 来检索值：

let darkMode = getCookie("darkMode");

Answer 2

对于存储主题，最好使用localStorage 。

示例代码：

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
      div {
         width: 100px;
         height: 50px;
         border: 1px solid grey;
         border-radius: 5px;
         background-color: var(--bg);
         color: var(--fg);
      }

      .dark {
         --bg: black;
         --fg: white;
      }

      .white {
         --bg: white;
         --fg: black;
      }
   </style>
</head>

<body>
   <div>lorem ipsum...</div>
   <button id='switch' onclick="switchTheme()">switch theme</button>
   <script>
      function switchTheme() {
         var theme = localStorage.getItem('theme');
         var html = document.querySelector("html");
         if (theme === 'dark') {
            new_theme = 'light';
         } else {
            new_theme = 'dark';
         }
         html.classList.remove(theme);
         html.classList.add(new_theme);
         localStorage.setItem('theme', new_theme);
      }

      window.addEventListener('load', function () {
         var theme = localStorage.getItem('theme');
         if (theme === null || theme === undefined) {
            theme = 'light';
            localStorage.setItem('theme', theme);
         }
         var html = document.querySelector("html");
         html.classList.add(theme);
      })
   </script>

</body>

</html>

如何保存 cookies 以进行暗模式和亮模式切换？

问题描述

2 个解决方案

解决方案1
0 2021-12-04 05:53:02

解决方案2
0 2021-12-04 07:00:12

如何保存 cookies 以进行暗模式和亮模式切换？

问题描述

2 个解决方案

解决方案1 0 2021-12-04 05:53:02

解决方案2 0 2021-12-04 07:00:12

解决方案1
0 2021-12-04 05:53:02

解决方案2
0 2021-12-04 07:00:12