Question

我需要Cookie消息弹出窗口的帮助。我希望每个用户CLICK接受只显示一次该消息。这是代码：https://jsfiddle.net/bz8ur3wu/1/

$(document).ready(function(){
    $("button").click(function(){
        $(".cookie").fadeOut();
    });
});

 .cookie{width:100%;padding:20px;background:rgb(231, 231, 231);bottom:0;left:0;position:fixed;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cookie">
    This website use cookies. 
    <button>accept</button>
</div>

Answer 1

作为替代解决方案，我建议localstorage。查找cookieconsent值并在body添加一个类，如果您已找到它;否则在用户点击按钮时设置值。

$(document).ready(function(){
    if (!!localStorage.getItem("cookieconsent")) {
        document.body.classList.add("cookieconsent")
    } 
    else {
        $("button").click(function() {
            localStorage.setItem("cookieconsent", "ok")
            $(".cookie").fadeOut();
        });
    }
});

然后在你的CSS中显示.cookie元素只有当用户之前没有接受时，也就是说，如果body没有.cookieconsent类

.cookie { 
    display: none; }

body:not(.cookieconsent) .cookie {
    display: block;
}

Answer 2

我创建了一个包含在每个项目中的小脚本。 I0ts创建一个cookie并检查是否存在，以显示或隐藏ID为#cookie-notice

的div

我认为这是一个好的开始。比你想要的个性化

var myProj = myProj || {}
myProj.cookiePolicy = function (__M) {
    var cookiePolicy = document.querySelector('#cookie-notice'),
        acceptCookieBtn = cookiePolicy.querySelector('#cn-accept-cookie'),
        closeCookiePolicy = cookiePolicy.querySelector('a.close-button');

    closeCookiePolicy.addEventListener('click', function (ev) {
        ev.preventDefault();
        acceptCookie();
    });

    document.querySelector('body').addEventListener('click', function (ev) {
        acceptCookie();
    });

    window.addEventListener('scroll', function (ev) {
        acceptCookie();
    });

    acceptCookieBtn.addEventListener('click', function (ev) {
        ev.preventDefault();
        acceptCookie();
    });

    if (document.cookie.indexOf('cookie_notice_accepted') === -1) {
        cookiePolicy.classList.add('show');
    }

    function acceptCookie() {
        if (document.cookie.indexOf('cookie_notice_accepted') === -1) {
            cookiePolicy.classList.add('show');
            // set cookie
            var d = new Date();
            d.setTime(d.getTime() + (365 * 24 * 60 * 60 * 1000));
            document.cookie = 'cookie_notice_accepted=true' + ';expires=' + d.toGMTString();
        }

        if(cookiePolicy){
            cookiePolicy.parentNode.removeChild(cookiePolicy);
            cookiePolicy = null;
        }
    }
}(myProj);

Cookie消息仅显示每次点击/提交按钮接受一次

2 个答案: