无法在JavaScript中正确读取PHP生成的用户登录Cookie的问题

1. 阻断Cookie写入的根源问题排查 #

• 表单输入框缺失name属性：当前代码里的用户名输入框只有id="userNameBox"，没有配置name="userNameBox"，就算表单提交，浏览器也不会把这个输入框的值随POST请求传给PHP，$_POST['userNameBox']永远为空。
• 登录按钮类型错误：当前按钮是type="button"，没有绑定任何提交逻辑，点击后不会触发表单POST流程，PHP根本收不到请求。
• setcookie()调用时机错误：PHP要求所有设置Cookie的代码必须在页面任何HTML、文本输出之前执行，当前代码是先输出了大量HTML表单内容后才调用setcookie()，会触发headers already sent警告，Cookie写入失败。
• 表单action配置错误：硬写的myDomain.com是相对路径，不是合法的请求地址，提交时会跳转到错误位置，到不了PHP处理逻辑。
• Cookie过期参数配置的影响：原来的$expires=0是会话Cookie，测试时如果浏览器关闭重开就会丢失，不方便验证功能，可以设置为固定时间戳方便排查。
• 域名参数硬写容易错配：硬编码的myDomain.com如果和实际访问的域名、端口不匹配，浏览器会直接拒绝存储该Cookie。

2. JavaScript读取Cookie的逻辑修正 #

• 原split写法的问题：直接用split('LOGIN_USERNAME_COOKIE=')[1]取值，当目标Cookie不存在时会取到undefined；即便存在，取到的字符串也会把后续拼接的所有第三方跟踪Cookie（如__utma、_fbp）全部包含进来，无法得到纯净的用户名值——这就是你看到弹窗里拼接了大量第三方Cookie内容的核心原因。
• 修正方法：按分号分割所有Cookie条目，遍历匹配目标键名，单独截取对应的值，避免混入其他Cookie内容，同时增加存在性判断。

3. 修正后参考代码 #

PHP端核心逻辑（注意执行顺序） #

<?php
// 【必须放在所有HTML输出之前】处理Cookie写入
if ($_SERVER['REQUEST_METHOD'] === 'POST' && !empty($_POST['userNameBox'])) {
    setcookie(
        "LOGIN_USERNAME_COOKIE",
        trim($_POST['userNameBox']),
        time() + 86400 * 30, // 30天后过期，方便测试
        "/",
        $_SERVER['HTTP_HOST'], // 自动匹配当前访问域名，避免硬编码错配
        false,
        false // httponly必须为false，否则JS无法读取
    );
    // 写入后重定向到当前页，避免刷新重复提交
    header("Location: " . $_SERVER['PHP_SELF']);
    exit;
}
?>
<!-- 以下是页面输出内容 -->
<form method="POST" name="loginForm" action="">
  <div class="loginContainer">
    <label for="userNameBox"><b>Account Login: </b></label>
    <!-- 补充name属性，确保POST能传值 -->
    <input type="text" class="userName" id="userNameBox" name="userNameBox" placeholder="Enter Username" required="required">
    <!-- 把按钮类型改成submit，触发表单提交 -->
    <input type="submit" class="loginButton" id="loginButton" value="Login"/>
  </div>
</form>
<div id="toolbar"></div>

JavaScript端读取逻辑 #

// 通用Cookie读取方法
function getCookie(targetKey) {
  const allCookies = document.cookie.split('; ');
  for (const cookieItem of allCookies) {
    const [key, value] = cookieItem.split('=');
    if (key === targetKey) return decodeURIComponent(value);
  }
  return null;
}

// 读取并展示
const savedUserName = getCookie('LOGIN_USERNAME_COOKIE');
if (savedUserName) {
  confirm("Username entered: " + savedUserName);
} else {
  confirm("未获取到已存储的用户名Cookie");
}

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