将js转换为php以获取背景颜色cookie

Question

I am using the following js script to add a cookie for background color changed by the user, however it takes like half of 1 second to load the color, and I was thinking that using php for the cookie would be better to write the chosen color from the point of loading the page, so it loads with the right color from the start.

JS:

var setCookie = function (n, val) {
    var exdays = 30;
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = n + "=" + val + "; " + expires;
};

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

document.onclick = function (e) {
    if (e.target.className == 'color-btn') {
        var favColor = e.target.style.backgroundColor;
        setCookie('color', favColor);
        document.body.style.backgroundColor = favColor;
        console.log(favColor);
    }
};

window.onload = function () {
    var favColor = document.body.style.backgroundColor;
    var color = getCookie('color');
    if (color === '') {
        document.body.style.backgroundColor = favColor;
    } else {
      document.body.style.backgroundColor = color;
    }
};

      body {
  background-color: rgba(219, 218, 236, 1);
}

.color-btn {
  width: 100px;
  height: 25px;
  display: inline-block;
  cursor: pointer;
  margin: 0;
  padding: 0;
  border: 1px solid white;
}

<li><button class="color-btn" style="background-color: #dbdaec"></button></li>
<li><button class="color-btn" style="background-color: #B4CAE5"></button></li>
<li><button class="color-btn" style="background-color: #C2E5C6"></button></li>
<li><button class="color-btn" style="background-color: #EAEAEA"></button></li>
<li><button class="color-btn" style="background-color: #ffffff"></button></li>

Note: the above script is in sandbox, and won't work here.

The converted php (that is not working):

<?php
$setCookie = new Func(function($n = null, $val = null) use (&$Date, &$document) {
  $exdays = 30.0;
  $d = _new($Date);
  call_method($d, "setTime", _plus(call_method($d, "getTime"), to_number($exdays) * 24.0 * 60.0 * 60.0 * 1000.0));
  $expires = _concat("expires=", call_method($d, "toGMTString"));
  set($document, "cookie", _concat($n, "=", $val, "; ", $expires));
});
$getCookie = new Func(function($n = null) use (&$document) {
  $name = _concat($n, "=");
  $ca = call_method(get($document, "cookie"), "split", ";");
  for ($i = 0.0; $i < get($ca, "length"); $i++) {
    $c = get($ca, $i);
    while (eq(call_method($c, "charAt", 0.0), " ")) {
      $c = call_method($c, "substring", 1.0);
    }
    if (eq(call_method($c, "indexOf", $name), 0.0)) {
      return call_method($c, "substring", get($name, "length"), get($c, "length"));
    }
  }
  return "";
});
set($document, "onclick", new Func(function($e = null) use (&$setCookie, &$document, &$console) {
  if (eq(get(get($e, "target"), "className"), "color-btn")) {
    $favColor = get(get(get($e, "target"), "style"), "backgroundColor");
    call($setCookie, "color", $favColor);
    set(get(get($document, "body"), "style"), "backgroundColor", $favColor);
    call_method($console, "log", $favColor);
  }
}));
set($window, "onload", new Func(function() use (&$document, &$getCookie) {
  $favColor = get(get(get($document, "body"), "style"), "backgroundColor");
  $color = call($getCookie, "color");
  if ($color === "") {
    set(get(get($document, "body"), "style"), "backgroundColor", $favColor);
  } else {
    set(get(get($document, "body"), "style"), "backgroundColor", $color);
  }

}));
?>

</div>

Answer 1

Here is a working simplified version:

<?php
$colors = ['#dbdaec', '#B4CAE5', '#C2E5C6', '#EAEAEA', '#ffffff'];
// Default color
$color = $colors[4];
// Try to read the cookie
if(isset($_COOKIE["color"])) {
  // If it exists, set the color to its value
  $color = $_COOKIE["color"];
}
?><!DOCTYPE html>
<html>
<head>
  <style>
  body { background-color: <?=$color?>; } /* Here, use the color */
  .color-btn {
    width: 100px; height: 25px;
    display: inline-block;
    cursor: pointer;
    margin: 0; padding: 0;
    border: 1px solid white;
  }
  </style>
</head>
<body>
  <ul><?php foreach ($colors as $c) { ?>
      <li><button class="color-btn" style="background-color: <?=$c?>"></button></li>
    <?php } ?>
  </ul>
  <script>
  // I did not edit your JS other than remove unused blocks
  var setCookie = function (n, val) {
    var exdays = 30;
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = n + "=" + val + "; " + expires;
  };
  document.onclick = function (e) {
    if (e.target.className == 'color-btn') {
      var favColor = e.target.style.backgroundColor;
      setCookie('color', favColor);
      document.body.style.backgroundColor = favColor;
      console.log(favColor);
    }
  };
  </script>
</body>
</html>

It uses JS to set the cookie client-side, so that the page does not reload. And the next time you reload the page or go to another, PHP will read that cookie and set that background color server-side so that there is no color flash.