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

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

jquery html css

Jquery 为我的网站存储暗模式首选项,jquery,html,css,Jquery,Html,Css,我已经为我的网站创建了暗模式，但当我打开暗模式，然后刷新页面或导航时，首选项会重置。我需要一种将首选项存储为cookie的方法。下面是我添加到jquery中的代码。我还在css文件中定义了暗模式颜色 $( ".inner-switch" ).on("click", function() { if( $( "body" ).hasClass( "dark" )) { $( "body" ).removeClass( "dark" ); $( "nav" ).removeCl

我已经为我的网站创建了暗模式，但当我打开暗模式，然后刷新页面或导航时，首选项会重置。我需要一种将首选项存储为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" );
  }
});

首先，您需要将您的状态存储在例如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" );
 }
});

如果设置了localstorage，则检查onload：

<body onload="myFunction()">

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


myFunction（）{
if（localStorage.getItem（“暗”））{
$（“正文”）.addClass（“黑色”）；
$（“导航”）.addClass（“导航栏导航栏扩展md导航栏暗”）；
$（“.internal switch”）.text（“ON”）；
}

您需要的是在浏览器上保存用户首选项，最简单的方法是使用

localStorage

使用

localStorage

，您可以在浏览器中存储一个变量，例如

darkMode

，即使在浏览器关闭并重新打开后，该变量仍将保留在浏览器中

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

如果用户是返回用户，则读取先前保存的
```
暗模式值
```
，或
将变量
```
darkMode
```
设置为默认值，例如
```
“OFF”
```

然后，在switch事件处理程序中，可以如下翻转变量的值：

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

关于在Cookie中存储信息，您还做了哪些其他研究？您是否检查了使用方法？感谢您的回复。如您所述，当我申请时，暗模式开关不再工作。没有给我错误。只是暗模式开关没有任何作用。感谢您的回复。请澄清评论“//相关CSS更改”和“/”基于“mode”的值应用相关CSS更改。@Ajisto我只是想应用您已有的代码（添加/删除类）。我没有将它们包含在答案中，只是为了让它更具可读性。关于基于

模式

的值应用更改，我的意思是检查：如果

模式

是

“开”

，添加与暗模式相关的类，否则，添加亮模式。

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