首次进入网站弹出 cookie 隐私政策按钮,并写入浏览器 cookie,简单 HTML-JS 案例

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>Cookie Policy Example</title>  
    <style>  
        .cookie-policy-overlay {  
            position: fixed;  
            top: 0;  
            left: 0;  
            right: 0;  
            bottom: 0;  
            background-color: rgba(0, 0, 0, 0.5); 
            z-index: 9998; 
            display: none;  
        }  
        .cookie-policy-container {  
            position: fixed;  
            bottom: 0;  
            left: 0;  
            right: 0;  
            background-color: #f0f0f0;  
            padding: 10px;  
            text-align: center;  
            z-index: 9999;  
            display: none;  
        }  

    </style>  
</head>  
<body>  
  
<!-- Cookie 消息框和遮罩层 -->  
<div id="cookie-policy-overlay"></div>  
<div id="cookie-policy-container">  
    <p>我们的网站使用cookies来改善您的浏览体验。请点击同意以继续浏览。</p>  
    <div>  
        <button id="accept-cookies">同意</button>  
        <button id="reject-cookies">拒绝</button>  
    </div>  
</div>  
  
<!-- 网站内容 -->  
<p>这里是一些内容...</p>  
  
<script>  
    // 检查cookie是否存在  
function getCookie(name) {  
    var value = "; " + document.cookie;  
    var parts = value.split("; " + name + "=");  
    if (parts.length == 2) return parts.pop().split(";").shift();  
}  
  
// 设置cookie  
function setCookie(name, value, days) {  
    var expires = "";  
    if (days) {  
        var date = new Date();  
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));  
        expires = "; expires=" + date.toUTCString();  
    }  
    document.cookie = name + "=" + (value || "") + expires + "; path=/";  
}  
  
// 隐藏cookie政策消息框和遮罩层  
function hideCookiePolicy() {  
    var cookiePolicyContainer = document.getElementById('cookie-policy-container');  
    var cookiePolicyOverlay = document.getElementById('cookie-policy-overlay');  
    cookiePolicyContainer.style.display = 'none';  
    cookiePolicyOverlay.style.display = 'none';  
}  
  
// 页面加载时检查cookie并显示或隐藏消息框  
window.onload = function() {  
    var cookiePolicyContainer = document.getElementById('cookie-policy-container');  
    var cookiePolicyOverlay = document.getElementById('cookie-policy-overlay');  
    var hasCookie = getCookie('cookie_policy_accepted');  
  
    if (!hasCookie) {  
        // 如果没有cookie,则显示消息框和遮罩层  
        cookiePolicyContainer.style.display = 'block';  
        cookiePolicyOverlay.style.display = 'block';  
  
        // 添加点击遮罩层时关闭消息框的事件
        cookiePolicyOverlay.addEventListener('click', function() {  
            hideCookiePolicy();  
        });  
    }  
  
    // 同意按钮点击事件  
    document.getElementById('accept-cookies').addEventListener('click', function() {  
        // 设置cookie表示用户已经同意  
        setCookie('cookie_policy_accepted', 'true', 30); // 设置cookie有效期为30天  
        // 隐藏cookie政策消息框和遮罩层  
        hideCookiePolicy();  
    });  
  
    // 拒绝按钮点击事件
    document.getElementById('reject-cookies').addEventListener('click', function() {
        // 弹出拒绝提示,也可以搞成关闭网站,或者重定向到某个url
        alert('您拒绝了cookie政策。某些功能可能无法使用。');  
        // 隐藏cookie政策消息框和遮罩层  
        hideCookiePolicy();  
    });  
};
</script>
</body>  
</html>

打赏

取消

感谢支持!

扫码支持

打开支付宝扫一扫,即可进行扫码打赏哦


「本文由 Savalone 原创或搜集整理发布,转载请遵守 CC BY-NC-ND 4.0 许可!」
  • 3