使用Cookie实现单选按钮控制页面背景颜色的问题求助

核心思路是在options.php提交颜色选择时，把选中的颜色存入Cookie（和用户名密码的Cookie保持相同作用域），然后在homepage.php中读取该Cookie并动态设置页面背景色，同时优化options页面的前端逻辑以保持选择状态。

修改后的代码实现 #

1. 更新options.php #

添加颜色表单的PHP处理逻辑，同时修正前端JS的冗余判断：

<?php
if(isset($_POST['submit'])){
    $username = htmlentities($_POST['username']);
    $password = htmlentities($_POST['password']);
    setcookie('username', $username, time() + 3600, "/"); // 有效期改为1小时，方便测试
    setcookie('password', $password, time() + 3600, "/"); 
}

// 处理颜色提交，写入bgColor Cookie
if(isset($_POST['submit2']) && isset($_POST['bgcRbtns'])){
    $bgColor = htmlentities($_POST['bgcRbtns']);
    setcookie('bgColor', $bgColor, time() + 3600, "/");
}

// 获取已保存的颜色，用于页面加载时自动选中对应单选框
$currentColor = isset($_COOKIE['bgColor']) ? $_COOKIE['bgColor'] : '';
?>
<html>
<body>
<form action = "http://localhost/homepage.php" method="POST">
    <!-- 根据Cookie值设置默认选中状态 -->
    <input type="radio" name="bgcRbtns" class="radioColor" value="red" <?php echo $currentColor == 'red' ? 'checked' : ''; ?>> Red
    <input type="radio" name="bgcRbtns" class="radioColor" value="green" <?php echo $currentColor == 'green' ? 'checked' : ''; ?>> Green
    <input type="radio" name="bgcRbtns" class="radioColor" value="blue" <?php echo $currentColor == 'blue' ? 'checked' : ''; ?>> Blue
    <input type="radio" name="bgcRbtns" class="radioColor" value="#AC4FC6" <?php echo $currentColor == '#AC4FC6' ? 'checked' : ''; ?>> Purple
    <input type="submit" value="Submit" name="submit2">
    <script>
        let radioButtons = document.getElementsByClassName('radioColor');
        
        // 页面加载时自动应用已选中的颜色
        window.onload = function () {
            for (let btn of radioButtons) {
                if (btn.checked) {
                    document.body.style.backgroundColor = btn.value;
                    break;
                }
            }
        }
        
        // 切换单选框时实时更新背景色
        for (let btn of radioButtons) {
            btn.addEventListener('change', function (e) {
                document.body.style.backgroundColor = e.target.value;
            })
        }
    </script>
</body>
</html>

2. 更新homepage.php #

读取bgColor Cookie并设置页面背景色：

<html>
<body style="<?php echo isset($_COOKIE['bgColor']) ? 'background-color: ' . $_COOKIE['bgColor'] . ';' : ''; ?>">
<h1>欢迎来到你的自定义页面</h1>

<?php
if(isset($_COOKIE['username'])){
    echo '用户：'  . $_COOKIE['username'] . '<br>';
    echo '密码：'  . $_COOKIE['password'] . '<br>';
} else {
    echo '未登录';
}
?>

</body>
</html>

补充说明 #

• Cookie有效期设为1小时，可根据需求调整（比如time() + 86400为1天）
• 使用htmlentities()避免XSS注入风险，养成安全编码习惯
• 若不需要持久保存颜色，也可直接通过POST传递：在homepage.php中读取$_POST['bgcRbtns']设置背景色，但刷新页面后会丢失设置

内容的提问来源于stack exchange，提问作者nameless1093