如何获取指定名称Cookie及检查HTML中Cookie是否存在？附问题代码

嘿，我注意到你有两个Cookie相关的需求：一是获取指定名称的Cookie，二是检查页面中某个Cookie是否存在。不过你写的那段检查代码有点小问题——你把服务器端的PHP代码和浏览器端的JavaScript代码混在一起啦，这俩没法在浏览器里直接一起运行哦！我来帮你修正并实现这两个需求：

要在前端HTML页面里检查Cookie，得用浏览器能识别的JavaScript来实现，不能用PHP语法。正确的思路是解析document.cookie字符串，看看目标Cookie名称是否存在：

function checkCookieExists(cookieName) {
  // 把Cookie字符串拆分成单个Cookie的键值对数组
  const cookies = document.cookie.split(';').map(cookie => cookie.trim());
  // 遍历数组检查是否有匹配的Cookie名称
  return cookies.some(cookie => cookie.startsWith(`${cookieName}=`));
}

调用这个函数的话，就可以这样用：

const targetCookie = 'testhastin';
const isExists = checkCookieExists(targetCookie);
// 把结果显示到页面上
document.getElementById("ttttt").innerHTML = isExists ? "已设置" : "未设置";

如果要获取某个Cookie的具体值，同样通过解析document.cookie来实现：

function getCookieValue(cookieName) {
  const cookies = document.cookie.split(';').map(cookie => cookie.trim());
  const targetCookie = cookies.find(cookie => cookie.startsWith(`${cookieName}=`));
  // 如果找到就返回值，没找到返回null
  return targetCookie ? targetCookie.split('=')[1] : null;
}

调用示例：

const myCookieValue = getCookieValue('testhastin');
console.log('获取到的Cookie值：', myCookieValue);

把这两个功能整合到你的HTML页面里，修正后的代码是这样的：

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="a1">
  <p id="ttttt">a1 test</p>
</div>
<script>
// 检查Cookie是否存在的函数
function checkCookieExists(cookieName) {
  const cookies = document.cookie.split(';').map(cookie => cookie.trim());
  return cookies.some(cookie => cookie.startsWith(`${cookieName}=`));
}

// 获取指定Cookie值的函数
function getCookieValue(cookieName) {
  const cookies = document.cookie.split(';').map(cookie => cookie.trim());
  const targetCookie = cookies.find(cookie => cookie.startsWith(`${cookieName}=`));
  return targetCookie ? targetCookie.split('=')[1] : null;
}

// 页面加载后执行检查
window.onload = function() {
  const cookieName = 'testhastin';
  // 检查Cookie是否存在并更新页面显示
  const isExists = checkCookieExists(cookieName);
  document.getElementById("ttttt").innerHTML = isExists ? "Cookie已设置" : "Cookie未设置";
  
  // 可选：获取并打印Cookie值
  const cookieValue = getCookieValue(cookieName);
  if (cookieValue) {
    console.log(`Cookie ${cookieName}的值是：${cookieValue}`);
  } else {
    console.log(`Cookie ${cookieName}不存在`);
  }
};
</script>
</body>
</html>

这样就能完美实现你的两个需求啦！记住，前端操作Cookie只能用JavaScript，PHP是运行在服务器上的，不能直接在浏览器的脚本里使用哦~

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