如何在页面加载之前检查 cookie？

Question

我正在创建一个程序，我希望能够通过单击 moon/sun 图标将样式表从浅色更改为深色。图标和样式表应该在单击时更改，但是，样式表会立即更改，图标只会在我刷新页面后更改。这是我正在使用的代码。

<?php 
$darkcss = 'dark.css';
$lightcss = 'light.css';
$expire = time()+60*60*24*30;

if ( (isset($_GET['css'])) && ($_GET['css'] == $lightcss) ) { 
    $_SESSION['css'] = $_GET['css']; 
    setcookie('css', $_GET['css'], $expire);
    }

if ( (isset($_GET['css'])) && ($_GET['css'] == $darkcss) ) {
    $_SESSION['css'] = $_GET['css']; 
    setcookie('css', $_GET['css'], $expire); 
    }

if (isset($_COOKIE['css'])) {
    $savedcss = $_COOKIE['css']; 
    } else {
    $savedcss = $lightcss;
    }

if ($_SESSION['css']) {
    $css = $_SESSION['css'];
    } else {
    $css = $savedcss;
    } 
    
echo '<link rel="stylesheet" href="/dashboard/assets/css/lights-out/'.$css.'">';

function iconChanger() {
    
    if(isset($_COOKIE['css']) && $_COOKIE['css'] == "light.css") {
        echo "<li class='nav-item dropdown nav-apps'>
                <a class='nav-link dropdown-toggle' href='?css=dark.css' role='button' aria-haspopup='true' aria-expanded='false'>
                    <i data-feather='moon'></i>
                </a>
              </li>";
    } else {
        echo "<li class='nav-item dropdown nav-apps'>
                <a class='nav-link dropdown-toggle' href='?css=light.css' role='button' aria-haspopup='true' aria-expanded='false'>
                    <i data-feather='sun'></i>
                </a>
              </li>";
    }
}
?>

Answer 1

如果我使用那种方法，我会按照这样的方式做一些事情，但老实说，我会为此使用 class。

<?php

// little bit of a double up but to make it easier to grab your own data them them as arrays (or you could even do objects)
$css_modes = [
    'light' => [
        'stylesheet' => 'light.css' ,
        'name' => 'light' ,
        'toggle_icon' => 'moon' ,
        'toggle_parameter' => 'dark' ,
    ],
    'dark' => [
        'stylesheet' => 'dark.css' ,
        'name' => 'dark' ,
        'toggle_icon' => 'sun' ,
        'toggle_parameter' => 'light' ,
    ],
];

// set default css...
$current_mode = $css_modes['light'];

//check if cookie set, exists and override if applicable.
if (isset($_COOKIE['css'], $css_modes[$_COOKIE['css']])) {
    // don't trust data from cookies either as these can be manipulated.
    $current_mode = $css_modes[$_COOKIE['css']];
}

//check if index exists in css_modes for security
if (isset($_GET['css'], $css_modes[$_GET['css']])) {
    // if its set that means it exists so $_GET['css'] == light or dark.
    //set current mode
    $current_mode = $css_modes[$_GET['css']];
    //set expiry
    $expire = time() + 60 * 60 * 24 * 30;
    // set cookie and pull data because still dont trust user data.
    // cookie now holds light or dark.
    setcookie('css', $current_mode['name'], $expire);
}

$_SESSION['css_mode'] = $current_mode;

// You can then use
?>
<link rel="stylesheet" href="/dashboard/assets/css/lights-out/<?= $_SESSION['css_mode']['stylesheet']; ?>">

<?php
function displayIcon()
{
    ?>
    <li class='nav-item dropdown nav-apps'>
        <a class='nav-link dropdown-toggle' href='?css=<?= $_SESSION['css_mode']['toggle_parameter']; ?>' role='button' aria-haspopup='true' aria-expanded='false'>
            <i data-feather='<?= $_SESSION['css_mode']['toggle_icon']; ?>'></i>
        </a>
    </li>
    <?php
}

displayIcon();

?>

如何在页面加载之前检查 cookie？

How to check cookies before the page loads in?

php

cookies