如何在Astro客户端侧检查Cookie是否存在并调用Astro.cookies.has()？

首先明确：Astro.cookies 是服务端专属API，浏览器的客户端环境无法直接访问它。要在客户端判断用户是否接受过Cookie，得用浏览器原生的document.cookie API来实现。

具体实现步骤 #

1. 写一个工具函数检查指定Cookie是否存在

function hasCookie(name) {
  return document.cookie.split(';').some(cookie => {
    return cookie.trim().startsWith(`${name}=`);
  });
}

2. 修改你的现有逻辑，替换userAcceptsCookies的判断
   假设标记用户接受Cookie的Cookie名为cookies_accepted，调整代码如下：

const cookiesConsentBanner = document.getElementById('cookies-consent-banner');
const userAcceptedCookies = hasCookie('cookies_accepted');

if (!userAcceptedCookies && !sessionStorage.getItem("cookies-denied")) {
    cookiesConsentBanner?.classList.remove("hidden");
}

3. 补充同意/拒绝按钮的逻辑（配合Tailwind的隐藏类）

• 同意按钮事件：

document.getElementById('accept-cookies-btn').addEventListener('click', () => {
    // 设置有效期1年的Cookie，路径覆盖全站
    document.cookie = "cookies_accepted=true; max-age=31536000; path=/; SameSite=Lax";
    cookiesConsentBanner?.classList.add("hidden");
});

• 拒绝按钮事件：

document.getElementById('deny-cookies-btn').addEventListener('click', () => {
    sessionStorage.setItem("cookies-denied", "true");
    cookiesConsentBanner?.classList.add("hidden");
});

额外提示 #

• 确保脚本在DOM加载完成后执行：可以把脚本放在</body>标签末尾，或者用DOMContentLoaded事件包裹逻辑：

document.addEventListener('DOMContentLoaded', () => {
  // 上面的所有代码放在这里
});

• 若需要区分不同类型的Cookie授权，只需扩展hasCookie函数或添加多组Cookie判断即可。

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