Question

我已经为网站创建了暗模式，但是当我打开暗模式后，刷新页面或浏览偏好设置。我需要一种将首选项存储为cookie的方法。这是我添加到jquery的代码。我还在CSS文件中定义了深色模式颜色。

    $( ".inner-switch" ).on("click", function() {
    if( $( "body" ).hasClass( "dark" )) {
  $( "body" ).removeClass( "dark" );
  $( "nav" ).removeClass( "navbar navbar-expand-md navbar-dark" );
  $( "nav" ).addClass( "navbar navbar-expand-md navbar-light");
  $( ".inner-switch" ).text( "OFF" );
  } else {
  $( "body" ).addClass( "dark" );
  $( "nav" ).addClass( "navbar navbar-expand-md navbar-dark");
  $( ".inner-switch" ).text( "ON" );
  }
});

Answer 1

首先，您需要将状态存储在例如localstorage中：

$( ".inner-switch" ).on("click", function() {
if( $( "body" ).hasClass( "dark" )) {
localStorage.removeItem("dark");
$( "body" ).removeClass( "dark" );
$( "nav" ).removeClass( "navbar navbar-expand-md navbar-dark" );
$( "nav" ).addClass( "navbar navbar-expand-md navbar-light");
$( ".inner-switch" ).text( "OFF" );
} else {
 localStorage.setItem("dark");
 $( "body" ).addClass( "dark" );
 $( "nav" ).addClass( "navbar navbar-expand-md navbar-dark");
 $( ".inner-switch" ).text( "ON" );
 }
});

然后您检查是否设置了本地存储：

<body onload="myFunction()">

myFunction(){
   if(localStorage.getItem("dark")){
      $( "body" ).addClass( "dark" );
      $( "nav" ).addClass( "navbar navbar-expand-md navbar-dark");
      $( ".inner-switch" ).text( "ON" );
}

Answer 2

您需要在浏览器中保存用户偏好设置，最简单的方法是使用localStorage。

使用localStorage，您可以拥有一个变量darkMode，该变量可以存储在浏览器中，即使关闭并重新打开浏览器，该变量也将保留在其中。

因此，一旦用户打开您的网站，您可以：

如果用户是老用户，则读取先前保存的darkMode值，或者
将变量darkMode设置为默认值，例如"OFF"。

。

onload = function() {
    if(localStorage.getItem("darkMode")) {
        var mode = localStorage.getItem("darkMode");
        //apply relevant CSS changes based on the value of 'mode'
    }
}

然后，在切换事件处理程序中，您可以像这样翻转变量的值：

$( ".inner-switch" ).on("click", function() {
    var mode = localStorage.getItem("darkMode");
    localStorage.setItem("darkMode", (mode == 'ON'? 'OFF': 'ON'));
    //relevant CSS changes
}

Answer 3

当我使用本地存储时，我的暗模式按钮不起作用。图片中有错误。

Image

为我的网站存储暗模式首选项

3 个答案: