GDPR合规：JS/JQuery实现Cookie横幅隐藏功能求助

首先给你个明确结论：用原生JavaScript就完全能搞定，不用引入jQuery——这样既减少了额外的库依赖，代码也足够简洁，适配你目前的经验水平。下面我一步步拆解代码，每部分都加注释，你直接复制到项目里就能用：

第一步：HTML结构（横幅部分） #

先把你的Cookie声明横幅写成这样，确保有唯一ID和OK按钮：

<div id="cookie-banner">
    本网站使用Cookie提升您的体验，点击OK表示同意。
    <button id="accept-cookies">OK</button>
</div>

第二步：基础CSS（控制显示/隐藏） #

给横幅加默认显示样式，再写个隐藏类，方便JS控制：

#cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #f0f0f0;
    padding: 1rem;
    text-align: center;
    margin: 0;
}

/* 隐藏横幅的类 */
.hidden {
    display: none;
}

第三步：核心JavaScript逻辑 #

下面的代码分三个关键功能：读取Cookie、设置Cookie、页面初始化判断。直接放到HTML的<script>标签里（建议放在</body>闭合前）：

// 1. 读取指定名称的Cookie
function getCookie(name) {
    // 把浏览器的Cookie字符串拆分成键值对数组
    const cookieArr = document.cookie.split("; ");
    for(let i = 0; i < cookieArr.length; i++) {
        const cookiePair = cookieArr[i].split("=");
        // 找到目标Cookie就返回它的值
        if(name === cookiePair[0]) {
            return decodeURIComponent(cookiePair[1]);
        }
    }
    // 没找到就返回null
    return null;
}

// 2. 设置有效期60天的Cookie
function setCookie(name, value) {
    const date = new Date();
    // 计算60天后的时间戳（毫秒为单位）
    date.setTime(date.getTime() + (60 * 24 * 60 * 60 * 1000));
    // 生成Cookie的过期时间字符串
    const expires = "expires=" + date.toUTCString();
    // 设置Cookie，path=/确保全站页面都能读取到
    document.cookie = name + "=" + encodeURIComponent(value) + "; " + expires + "; path=/";
}

// 3. 页面加载时的初始化逻辑
function initCookieBanner() {
    const banner = document.getElementById("cookie-banner");
    const acceptBtn = document.getElementById("accept-cookies");

    // 检查是否存在用户同意Cookie的记录
    const hasAccepted = getCookie("acceptedCookies");
    if(hasAccepted) {
        // 存在就隐藏横幅
        banner.classList.add("hidden");
    } else {
        // 不存在就显示横幅，给按钮绑定点击事件
        acceptBtn.addEventListener("click", function() {
            // 设置同意Cookie的记录
            setCookie("acceptedCookies", "true");
            // 隐藏横幅
            banner.classList.add("hidden");
        });
    }
}

// 页面加载完成后执行初始化
window.addEventListener("load", initCookieBanner);

额外说明（怕你看不懂特意加的） #

• getCookie：负责从浏览器的Cookie字符串里筛选出我们需要的那条记录，返回对应的值；
• setCookie：创建一个有效期60天的Cookie，path=/保证这个Cookie在网站所有页面都能被读取；
• initCookieBanner：页面加载时先检查有没有用户同意的Cookie，有就隐藏横幅，没有就显示并给按钮绑定点击事件，点击后设置Cookie再隐藏横幅。

为什么不用jQuery？因为现在原生JS的API已经足够好用，完全能实现这个需求，没必要额外加载一个库。而且你只有少量jQuery经验，用原生JS反而能帮你快速熟悉基础语法~

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