JavaScript 设置 Cookie 并使用 PHP 获取的完整教程-php教程-PHP中文网

JavaScript 设置 Cookie 并使用 PHP 获取的完整教程

花韻仙語

发布： 2025-10-21 10:43:01

原创

985人浏览过

javascript 设置 cookie 并使用 php 获取的完整教程

本文详细介绍了如何在 JavaScript 中设置 Cookie，并通过 PHP 在服务器端获取 Cookie 值。重点讲解了 Cookie 的设置方法、PHP 获取 Cookie 的方式，以及解决 Cookie 生效延迟问题的方案，并提供了使用 AJAX 传递 Cookie 的方法，以避免页面重新加载。

在 Web 开发中，经常需要在客户端使用 JavaScript 设置 Cookie，并在服务器端使用 PHP 获取 Cookie 的值。这可以用于存储用户偏好设置、跟踪用户行为等。以下将详细介绍如何实现这一过程，并解决可能遇到的问题。

JavaScript 设置 Cookie

在 JavaScript 中，可以使用 document.cookie 属性来设置 Cookie。其基本语法如下：

document.cookie = "cookieName=cookieValue; expires=date; path=path";

登录后复制

cookieName：Cookie 的名称。
cookieValue：Cookie 的值。
expires：Cookie 的过期时间，必须是 UTC 格式的日期字符串。如果省略，Cookie 将在浏览器会话结束时过期。
path：Cookie 的有效路径。如果省略，默认为当前页面的路径。

示例：

立即学习“PHP免费学习笔记（深入）”；

// 设置一个名为 "username" 的 Cookie，值为 "JohnDoe"，过期时间为 7 天后
let now = new Date();
let time = now.getTime();
let expireTime = time + 1000*3600*24*7;
now.setTime(expireTime);

document.cookie = "username=JohnDoe; expires=" + now.toUTCString() + "; path=/";

// 设置一个名为 "testing" 的 Cookie，其值来自一个耗时操作
async function setCookieWithData() {
  // 模拟一个耗时操作，例如从第三方 API 获取数据
  const a = await new Promise(resolve => setTimeout(() => resolve("Data from API"), 5000));
  document.cookie = "testing=" + a + "; path=/";
  console.log("Cookie 'testing' set.");
}

setCookieWithData();

登录后复制

注意事项：

Cookie 的值应该进行 URL 编码，以避免特殊字符导致的问题。可以使用 encodeURIComponent() 函数进行编码。
Cookie 的大小有限制，通常为 4KB。

PHP 获取 Cookie

在 PHP 中，可以使用 $_COOKIE 超全局变量来获取 Cookie 的值。

示例：

立即学习“PHP免费学习笔记（深入）”；

<?php
// 获取名为 "username" 的 Cookie 的值
if (isset($_COOKIE["username"])) {
  $username = $_COOKIE["username"];
  echo "Username: " . htmlspecialchars($username); // 使用 htmlspecialchars() 进行转义，防止 XSS 攻击
} else {
  echo "Username cookie not set.";
}

// 获取名为 "testing" 的 Cookie 的值
if (isset($_COOKIE["testing"])) {
    $testingValue = $_COOKIE["testing"];
    echo "<br>Testing Value: " . htmlspecialchars($testingValue);
} else {
    echo "<br>Testing cookie not set.";
}
?>

登录后复制

注意事项：

在使用 $_COOKIE 之前，应该使用 isset() 函数检查 Cookie 是否存在，以避免出现 "Undefined index" 错误。
为了安全起见，应该对 Cookie 的值进行转义，以防止 XSS 攻击。可以使用 htmlspecialchars() 函数进行转义。

解决 Cookie 生效延迟问题

由于 Cookie 是在客户端设置的，然后通过 HTTP 请求发送到服务器端，因此在 JavaScript 设置 Cookie 后，PHP 无法立即获取到 Cookie 的值。通常情况下，需要在页面重新加载后才能获取到新的 Cookie 值。

美图设计室

5分钟在线高效完成平面设计，AI帮你做设计

查看详情

解决方案：使用 AJAX 传递 Cookie

如果不想重新加载页面，可以使用 AJAX 将 Cookie 的值传递给 PHP。

示例：

立即学习“PHP免费学习笔记（深入）”；

JavaScript (设置 Cookie 并使用 AJAX 发送):

async function setAndSendCookie() {
  const a = await new Promise(resolve => setTimeout(() => resolve("Data from API"), 5000));
  document.cookie = "testing=" + a + "; path=/";
  console.log("Cookie 'testing' set.");

  // 使用 AJAX 将 Cookie 的值发送到 PHP
  let xhr = new XMLHttpRequest();
  xhr.open("POST", "process_cookie.php", true);
  xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  xhr.onload = function() {
    if (xhr.status === 200) {
      console.log("Response from PHP: " + xhr.responseText);
    }
  };
  xhr.send("testing=" + encodeURIComponent(a)); // 使用 encodeURIComponent 对数据进行编码
}

setAndSendCookie();

登录后复制

PHP (process_cookie.php):

<?php
if (isset($_POST["testing"])) {
  $testingValue = $_POST["testing"];
  echo "Received testing value: " . htmlspecialchars($testingValue);
} else {
  echo "Testing value not received.";
}
?>

登录后复制

在这个示例中，JavaScript 使用 AJAX 将 Cookie 的值作为 POST 请求的数据发送到 process_cookie.php。PHP 脚本从 $_POST 数组中获取 Cookie 的值，并进行处理。

总结：

通过 JavaScript 设置 Cookie，并通过 PHP 获取 Cookie 的值，是 Web 开发中常见的需求。理解 Cookie 的设置方法、PHP 获取 Cookie 的方式，以及解决 Cookie 生效延迟问题的方案，可以帮助你更好地处理 Cookie 相关的问题。使用 AJAX 可以在不刷新页面的情况下，将 JavaScript 中设置的 Cookie 值传递给 PHP，从而实现更灵活的功能。

以上就是JavaScript 设置 Cookie 并使用 PHP 获取的完整教程的详细内容，更多请关注php中文网其它相关文章！