时间戳

首页 > 解决方案 > 在 php cookie 中保存暗模式

css - 在 php cookie 中保存暗模式

问题描述

我为黑色模式编写了一个简单的小代码

我只想将用户的主题存储在 cookie 中 x 次

我在 css 中的黑暗主题：

body {
  padding: 0px;
  color: black;
  font-size: 25px;
  background-color: white;
}

.dark-mode .mainSection {
  background-color: black;
  color: white;
  padding: 600px;
  padding-top: 470px;
}

html

  <div id="dark-mode">
    <li><font size="2">
      <a class="nav-link" onclick="myFunction()">Dark Mode</font
    </li>
  </div>

Javascript：

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

  }

谢谢

标签： css

解决方案

只需使用 javascript 设置 cookie，下次客户端向服务器发出请求时，cookie 将随之发送。下面的代码应该可以工作

 function createCookie(name, value, timeInSeconds) {
       var date = new Date();
       date.setTime(date.getTime()+(timeInSeconds*1000));
       var expires = "; expires="+date.toGMTString();
    
       document.cookie = name+"="+value+expires+"; path=/";
 }

 function getCookie(cname) {
  let name = cname + "=";
  let decodedCookie = decodeURIComponent(document.cookie);
  let ca = decodedCookie.split(';');
  for(let i = 0; i <ca.length; i++) {
    let c = ca[i];
    while (c.charAt(0) == ' ') {
      c = c.substring(1);
    }
    if (c.indexOf(name) == 0) {
      return c.substring(name.length, c.length);
    }
  }
  return "";
}

function myFunction() {
      var element = document.body;
      const isDarkModeOn = element.classList.toggle("dark-mode");
      createCookie("isDarkModeOn", isDarkMode.toString(), 60 * 60 * 24); // 1 day expiry date
}

window.onload = function () {
  const isDarkModeOn = getCookie("isDarkModeOn");
  if(isDarkModeOn === "true") document.body.classList.add("dark-mode");
}

之后只需检查 PHP 中的 cookie，

<?php
 $isDarkModeOn = $_COOKIE["isDarkModeOn"] === "true";
 if($isDarkModeOn) {
   echo "Dark Mode is on";
 }
?>

推荐阅读