酷秀博客
首页/JS 底部弹窗实现 Cookie 隐私权限获取A I

JS 底部弹窗实现 Cookie 隐私权限获取

admin的头像admin4个月前A I144热度

实现 Cookie 隐私权限弹窗的核心是「底部固定显示 + 权限选择逻辑 + Cookie 状态存储」，确保用户首次访问时弹窗，选择后永久记忆，同时兼顾安全性和兼容性。（1）Cookie 操作安全
Screenshot_2025_1119_083112.png


<!DOCTYPE html><br />
<html lang="zh-CN"><br />
<head><br />
    <meta charset="UTF-8"><br />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"><br />
    <title>Cookie 隐私权限弹窗</title><br />
    <style><br />
        /* 底部弹窗样式：固定定位+遮罩层，兼顾移动端适配 */<br />
        .cookie-modal-mask {<br />
            position: fixed;<br />
            top: 0;<br />
            left: 0;<br />
            width: 100%;<br />
            height: 100%;<br />
            background: rgba(0, 0, 0, 0.5);<br />
            z-index: 9998;<br />
            display: none;<br />
        }<br />
        .cookie-modal {<br />
            position: fixed;<br />
            bottom: 0;<br />
            left: 0;<br />
            width: 100%;<br />
            max-width: 768px;<br />
            margin: 0 auto;<br />
            background: #fff;<br />
            border-radius: 12px 12px 0 0;<br />
            padding: 20px;<br />
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);<br />
            z-index: 9999;<br />
            display: none;<br />
        }<br />
        .cookie-modal.show {<br />
            display: block;<br />
        }<br />
        .cookie-modal-mask.show {<br />
            display: block;<br />
        }<br />
        .cookie-title {<br />
            font-size: 18px;<br />
            font-weight: 600;<br />
            margin-bottom: 10px;<br />
            color: #333;<br />
        }<br />
        .cookie-desc {<br />
            font-size: 14px;<br />
            color: #666;<br />
            margin-bottom: 15px;<br />
            line-height: 1.5;<br />
        }<br />
        .cookie-link {<br />
            color: #1677ff;<br />
            text-decoration: underline;<br />
            cursor: pointer;<br />
        }<br />
        .cookie-btns {<br />
            display: flex;<br />
            gap: 10px;<br />
            margin-top: 20px;<br />
        }<br />
        .cookie-btn {<br />
            flex: 1;<br />
            padding: 10px 0;<br />
            border-radius: 8px;<br />
            border: none;<br />
            font-size: 14px;<br />
            font-weight: 500;<br />
            cursor: pointer;<br />
            transition: background 0.2s;<br />
        }<br />
        .cookie-btn-reject {<br />
            background: #f5f5f5;<br />
            color: #666;<br />
        }<br />
        .cookie-btn-reject:hover {<br />
            background: #e5e5e5;<br />
        }<br />
        .cookie-btn-accept {<br />
            background: #1677ff;<br />
            color: #fff;<br />
        }<br />
        .cookie-btn-accept:hover {<br />
            background: #0f62fe;<br />
        }<br />
        /* 权限详情弹窗（可选） */<br />
        .cookie-detail-modal {<br />
            position: fixed;<br />
            top: 50%;<br />
            left: 50%;<br />
            transform: translate(-50%, -50%);<br />
            width: 80%;<br />
            max-width: 500px;<br />
            background: #fff;<br />
            border-radius: 12px;<br />
            padding: 20px;<br />
            z-index: 10000;<br />
            display: none;<br />
        }<br />
        .cookie-detail-modal.show {<br />
            display: block;<br />
        }<br />
        .cookie-detail-close {<br />
            position: absolute;<br />
            top: 15px;<br />
            right: 15px;<br />
            font-size: 20px;<br />
            cursor: pointer;<br />
            color: #666;<br />
        }<br />
    </style><br />
</head><br />
<body><br />
    <!-- 遮罩层 --><br />
    <div class="cookie-modal-mask" id="cookieMask"></div><br />
<br />
    <!-- Cookie 权限主弹窗 --><br />
    <div class="cookie-modal" id="cookieModal"><br />
        <h3 class="cookie-title">隐私政策与 Cookie 通知</h3><br />
        <p class="cookie-desc"><br />
            我们使用 Cookie 来提升您的浏览体验、分析网站流量，并为您提供个性化内容。<br />
            您可以选择「仅必要 Cookie」或「全部接受」，也可点击 <span class="cookie-link" id="showDetail">详情</span> 了解更多。<br />
        </p><br />
        <div class="cookie-btns"><br />
            <button class="cookie-btn cookie-btn-reject" id="rejectCookie">仅必要 Cookie</button><br />
            <button class="cookie-btn cookie-btn-accept" id="acceptCookie">全部接受</button><br />
        </div><br />
    </div><br />
<br />
    <!-- Cookie 权限详情弹窗（可选） --><br />
    <div class="cookie-detail-modal" id="cookieDetailModal"><br />
        <span class="cookie-detail-close" id="closeDetail">&times;</span><br />
        <h3 class="cookie-title">Cookie 权限详情</h3><br />
        <p class="cookie-desc"><strong>必要 Cookie</strong>：保障网站基础功能运行（如登录状态），无法禁用。</p><br />
        <p class="cookie-desc"><strong>功能 Cookie</strong>：记住您的偏好（如主题设置），提升使用体验。</p><br />
        <p class="cookie-desc"><strong>分析 Cookie</strong>：统计访问数据、优化网站性能，不含个人敏感信息。</p><br />
    </div><br />
<br />
    <script><br />
        // 1. DOM 元素获取<br />
        const cookieMask = document.getElementById('cookieMask');<br />
        const cookieModal = document.getElementById('cookieModal');<br />
        const acceptBtn = document.getElementById('acceptCookie');<br />
        const rejectBtn = document.getElementById('rejectCookie');<br />
        const showDetailBtn = document.getElementById('showDetail');<br />
        const closeDetailBtn = document.getElementById('closeDetail');<br />
        const detailModal = document.getElementById('cookieDetailModal');<br />
<br />
        // 2. Cookie 核心工具函数（安全+兼容）<br />
        const CookieUtil = {<br />
            // 设置 Cookie：支持过期时间（天）、路径、域名，默认365天有效期<br />
            set(name, value, days = 365, path = '/', domain = '') {<br />
                let expires = '';<br />
                if (days) {<br />
                    const date = new Date();<br />
                    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));<br />
                    expires = `; expires=${date.toUTCString()}`;<br />
                }<br />
                // 域名可选：非顶级域名需指定（如 '.xxx.com'），确保子域名共享 Cookie<br />
                const domainStr = domain ? `; domain=${domain}` : '';<br />
                // 写入 Cookie：路径默认 '/'，确保全站生效<br />
                document.cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)}${expires}${domainStr}; path=${path}`;<br />
            },<br />
<br />
            // 获取 Cookie：根据名称读取值，处理编码<br />
            get(name) {<br />
                const nameEQ = `${encodeURIComponent(name)}=`;<br />
                const cookies = document.cookie.split(';');<br />
                for (let i = 0; i < cookies.length; i++) {<br />
                    let cookie = cookies[i].trim();<br />
                    if (cookie.indexOf(nameEQ) === 0) {<br />
                        return decodeURIComponent(cookie.substring(nameEQ.length));<br />
                    }<br />
                }<br />
                return null; // 未找到返回 null<br />
            },<br />
<br />
            // 删除 Cookie：将过期时间设为过去，实现删除<br />
            remove(name, path = '/', domain = '') {<br />
                this.set(name, '', -1, path, domain);<br />
            }<br />
        };<br />
<br />
        // 3. 权限逻辑处理<br />
        class CookiePermission {<br />
            constructor() {<br />
                // 存储 Cookie 权限标识的 key（建议加项目前缀，避免冲突）<br />
                this.permissionKey = 'site_cookie_permission';<br />
                // 初始化：检查是否已存在权限状态<br />
                this.init();<br />
            }<br />
<br />
            // 初始化：判断是否显示弹窗<br />
            init() {<br />
                const permission = CookieUtil.get(this.permissionKey);<br />
                if (!permission) {<br />
                    // 未选择权限：显示弹窗和遮罩<br />
                    cookieMask.classList.add('show');<br />
                    cookieModal.classList.add('show');<br />
                } else {<br />
                    // 已选择权限：执行对应逻辑（如加载分析脚本）<br />
                    this.handlePermission(permission);<br />
                }<br />
            }<br />
<br />
            // 处理用户选择的权限（accept：全部接受；reject：仅必要）<br />
            handlePermission(permission) {<br />
                switch (permission) {<br />
                    case 'accept':<br />
                        // 全部接受：初始化功能、分析类 Cookie/脚本<br />
                        this.initAllCookies();<br />
                        break;<br />
                    case 'reject':<br />
                        // 仅必要：删除已存在的非必要 Cookie，不加载额外脚本<br />
                        this.clearNonNecessaryCookies();<br />
                        break;<br />
                    default:<br />
                        break;<br />
                }<br />
            }<br />
<br />
            // 全部接受：初始化非必要 Cookie（示例：主题偏好、分析标识）<br />
            initAllCookies() {<br />
                // 示例1：功能 Cookie - 记住用户主题偏好（默认浅色）<br />
                CookieUtil.set('site_theme', 'light', 30);<br />
                // 示例2：分析 Cookie - 生成唯一访问标识（用于统计）<br />
                CookieUtil.set('site_visit_id', this.generateRandomStr(), 7);<br />
                // 示例3：加载第三方分析脚本（如百度统计、Google Analytics）<br />
                this.loadAnalyticsScript();<br />
            }<br />
<br />
            // 仅必要：清除非必要 Cookie（示例：主题、分析相关）<br />
            clearNonNecessaryCookies() {<br />
                CookieUtil.remove('site_theme');<br />
                CookieUtil.remove('site_visit_id');<br />
                // 若已加载分析脚本，可执行关闭逻辑（如百度统计的暂停）<br />
                this.stopAnalytics();<br />
            }<br />
<br />
            // 生成随机访问标识（用于分析 Cookie，避免重复）<br />
            generateRandomStr(length = 16) {<br />
                const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';<br />
                let str = '';<br />
                for (let i = 0; i < length; i++) {<br />
                    str += chars.charAt(Math.floor(Math.random() * chars.length));<br />
                }<br />
                return str;<br />
            }<br />
<br />
            // 加载第三方分析脚本（示例：百度统计，实际项目替换为自身脚本）<br />
            loadAnalyticsScript() {<br />
                // 避免重复加载：检查脚本是否已存在<br />
                if (document.getElementById('baidu-analytics')) return;<br />
                <br />
                const script = document.createElement('script');<br />
                script.id = 'baidu-analytics';<br />
                script.src = 'https://hm.baidu.com/hm.js?您的百度统计ID';<br />
                script.async = true; // 异步加载，不阻塞页面渲染<br />
                document.body.appendChild(script);<br />
            }<br />
<br />
            // 停止分析脚本（示例：百度统计暂停统计）<br />
            stopAnalytics() {<br />
                if (window._hmt) {<br />
                    _hmt.push(['_pause']); // 百度统计暂停接口<br />
                }<br />
            }<br />
<br />
            // 用户选择权限：存储状态并隐藏弹窗<br />
            setPermission(permission) {<br />
                // 存储权限状态（accept/reject）<br />
                CookieUtil.set(this.permissionKey, permission);<br />
                // 处理权限逻辑<br />
                this.handlePermission(permission);<br />
                // 隐藏弹窗和遮罩<br />
                cookieMask.classList.remove('show');<br />
                cookieModal.classList.remove('show');<br />
            }<br />
        }<br />
<br />
        // 4. 实例化并绑定事件<br />
        const cookiePermission = new CookiePermission();<br />
<br />
        // 接受全部权限<br />
        acceptBtn.addEventListener('click', () => {<br />
            cookiePermission.setPermission('accept');<br />
        });<br />
<br />
        // 仅必要权限<br />
        rejectBtn.addEventListener('click', () => {<br />
            cookiePermission.setPermission('reject');<br />
        });<br />
<br />
        // 显示权限详情<br />
        showDetailBtn.addEventListener('click', () => {<br />
            detailModal.classList.add('show');<br />
        });<br />
<br />
        // 关闭权限详情<br />
        closeDetailBtn.addEventListener('click', () => {<br />
            detailModal.classList.remove('show');<br />
        });<br />
<br />
        // 点击遮罩关闭详情弹窗<br />
        cookieMask.addEventListener('click', () => {<br />
            detailModal.classList.remove('show');<br />
        });<br />
    </script><br />
</body><br />
</html><br />
<br />
```<br />
 <br />
- 编码处理：使用  encodeURIComponent / decodeURIComponent  对 Cookie 名称和值编码，避免特殊字符（如空格、&、=）导致的存储异常。<br />
​<br />
- 域名与路径控制：设置  domain  为顶级域名（如  .xxx.com ）确保子域名共享权限状态； path='/'  确保全站 Cookie 生效，避免局部路径无法读取的问题。<br />
​<br />
- 过期时间管理：权限状态默认存储 365 天，非必要 Cookie 按需设置短期有效期（如主题 Cookie 30 天），减少无效 Cookie 占用。<br />
 <br />
（2）用户体验与合规性<br />
 <br />
- 分层权限选择：支持「仅必要」和「全部接受」，符合 GDPR、CCPA 等隐私法规要求，避免强制同意。<br />
​<br />
- 详情透明化：新增权限详情弹窗，明确告知不同类型 Cookie 的用途，提升用户信任度。<br />
​<br />
- 移动端适配：弹窗固定底部、响应式宽度，按钮自适应布局，适配手机、平板等设备。<br />
 <br />
（3）性能优化<br />
 <br />
- 脚本异步加载：第三方分析脚本使用  async=true ，避免阻塞页面 DOM 渲染，提升首屏加载速度。<br />
​<br />
- 重复加载防护：加载分析脚本前检查是否已存在，避免多次执行导致的性能损耗和数据统计异常。<br />
​<br />
- 状态优先判断：页面初始化时先读取 Cookie 状态，未选择时才显示弹窗，减少不必要的 DOM 操作。
打赏反馈赞 1

#免责声明#

本文为转载 或 原创内容，未经授权禁止转载、摘编、复制及镜像使用、转载请注明作者、出处及原文链接、违者将依法追究责任。

签名： 最忠诚的BUG开发者来自: 重庆市. Chrome浏览器
文章目录