Question

已经有一段时间了，因为我访问的几乎所有网站都会弹出关于cookie等的消息。我从来不明白为什么，但是，无知，我总是点击“确定”。

由于担心可能会干扰我使用的Google AdSense，YouTube，Vimeo甚至Facebook（评论插件），我试图了解更多，甚至不给任何理由不付款（如果适用）。然后我按照一般的方式阅读我最关心的部分（因为我没有联系表格或用户注册）“除非授权的cookie不能记录在用户的浏览器中”。

但是如果我的网站是静态的，与Hugo一起生成的重要内容，有什么好处可以在底部或全屏叠加上添加横幅呢？用户可以同意，但我无法知道他们是否同意，因为它是静态的，只有HTML / JS / CSS，没有数据库，我会吗？我的意思是，我怎么能存储这个用户偏好？

修改

由于这个社区关闭（有时是低调和逃离）无需代码的主题，有时是不可接受的政策 - 如果概念问题是完全错误的 - 并且考虑到某些成员对此事的兴趣，正如所承诺的那样，我编写了一个非常基本的例子：

<!DOCTYPE html>

<html>

    <head>

        <title>GDPR Compliance Implementation</title>

        <style stype="text/css">

        html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font:inherit;font-size:100%;vertical-align:baseline}html,body{color:#242729;font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:13px;line-height:1.26666667}body{background:#FFF;box-sizing:border-box;color:#242729;display:flex;flex-direction:column;font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:13px;line-height:1.30769231;min-height:100%;min-width:1075px}a,.s-link{color:#07C;cursor:pointer;text-decoration:none}a.s-link__inherit,.s-link.s-link__inherit{color:inherit}.td-underline{text-decoration:underline!important}div{display:block}p{clear:both;margin-bottom:1em;margin-top:0}input[type="submit"],input[type="button"],button,.button,.btn,[class*="btn-"],.hero-box.double-panel .panel.white .btn{background-color:transparent;border:1px solid transparent;border-radius:2px;box-sizing:border-box;cursor:pointer;display:inline-block;font-family:inherit;font-weight:400;line-height:1;min-height:2.46153846em;outline:none;padding:.61538462em 1em;position:relative;text-align:center;text-decoration:none;touch-action:manipulation;transition:color .1s ease-in,background-color .1s ease-in,border-color .1s ease-in,box-shadow .1s ease-in;vertical-align:middle}svg:not(:root),symbol,image,marker,pattern,foreignObject{overflow:hidden}svg{width:14px;height:14px}.svg-icon{vertical-align:bottom;-moz-transform:rotate(360deg)}.s-btn .svg-icon{transition:opacity 200ms cubic-bezier(.165,.84,.44,1);margin:-.30769231em .15384615em -.15384615em -.53846154em}select,input,button,.button,a.button:link,.btn,[class*="btn-"],.hero-box.double-panel .panel.white .btn{background-color:#0095ff;border-color:#07c;box-shadow:inset 0 1px 0 #66bfff;color:#FFF}.svg-icon:not(.native) *{fill:currentColor}.s-btn{background-color:transparent;border:1px solid transparent;border-color:rgba(0,89,153,0);border-radius:2px;box-shadow:0 0 0 0 rgba(0,149,255,0);color:#07C;cursor:pointer;font-family:inherit;font-size:inherit;font-weight:400;line-height:1.15384615;outline:none;padding:.8rem;position:relative}.s-btn,.s-btn:focus{background-color:rgba(0,119,204,0)}.s-btn,.s-btn:hover,.s-btn:focus,.s-btn.is-selected,.s-btn[disabled]{background-image:none}.s-btn__inverted{box-shadow:0 0 0 0 rgba(0,149,255,0);color:rgba(204,234,255,0.9)}.s-btn__inverted,.s-btn__inverted:focus{background-color:rgba(255,255,255,0)}.bg-black-700{background-color:#3b4045!important}.fc-white{color:#FFF!important}.baw0{border-width:0}.lh-lg{line-height:1.61538462!important}.ps-fixed{position:fixed}.r0{right:0}.b0{bottom:0!important}.l0{left:0}.grid{display:flex}.grid-center{align-items:center!important;justify-content:center!important}.p16{padding:16px!important}.gs8{margin:-4px}.mx-auto{margin-left:auto;margin-right:auto}.m0{margin:0}.mb-0{margin-bottom:0!important}.mt-10p{margin-top:10%}.ml-auto{margin-left:auto}.gsx,.gsx>.grid,.gsx>[class*="grid--cell"]{margin-bottom:0;margin-top:0}.gs8>.grid,.gs8>.grid--cell{margin:4px}.wmx10{max-width:81.025641rem!important}.z-banner{z-index:5000!important}.hidden{display:none!important}

        </style>

    </head>

    <body>

        <div class="mx-auto mt-10p">
            <p>GDPR Compliance Implementation</p>
            <p>
                Have you agree with GDPR Compliance?
                <span id="hasCompliedWith">NO</span>
            </p>
            <p id="disagreeWithGDPR">
                <a href="javascript:void(0)">Click here</a> to disagree with GDPR
            </p>
        </div>

        <div id="js-gdpr-consent-banner" class="p16 bg-black-700 fc-white ps-fixed b0 l0 r0 z-banner" role="banner" aria-hidden="false">
            <div class="wmx10 mx-auto grid grid__center jc-spacebetween gs8 gsx" role="alertdialog" aria-describedby="notice-message">
                <div class="grid--cell" aria-label="notice-message">
                    <p class="mb0 lh-lg">
                        This site uses cookies to deliver our services and to show you relevant ads and job listings.
    By using our site, you acknowledge that you have read and understand our <a class="s-link s-link__inherit td-underline fc-white" target="_blank" href="https://stackoverflow.com/legal/cookie-policy">Cookie Policy</a>, <a class="s-link s-link__inherit td-underline fc-white" target="_blank" href="https://stackoverflow.com/legal/privacy-policy">Privacy Policy</a>, and our <a class="s-link s-link__inherit td-underline fc-white" target="_blank" href="https://stackoverflow.com/legal/terms-of-service/public">Terms of Service</a>.
    Your use of Stack Overflow’s Products and Services, including the Stack Overflow Network, is subject to these policies and terms.
                    </p>
                </div>
                <div class="grid--cell ml-auto" aria-label="notice-dismiss">
                    <button class="s-btn s-btn__inverted fc-white bg-black-700 baw0 p16 js-notice-close" role="status" aria-hidden="true">
                        <svg aria-hidden="true" id="gdpr" class="svg-icon m0 iconClearSm" width="14" height="14" viewBox="0 0 14 14">
                            <path d="M12 3.41L10.59 2 7 5.59 3.41 2 2 3.41 5.59 7 2 10.59 3.41 12 7 8.41 10.59 12 12 10.59 8.41 7z"></path>
                        </svg>
                    </button>
                </div>
            </div>
        </div>

        <script type="text/javascript">

            /*!
             * JavaScript Cookie v2.2.0
             * https://github.com/js-cookie/js-cookie
             *
             * Copyright 2006, 2015 Klaus Hartl & Fagner Brack
             * Released under the MIT license
             */
            !function(e){var n;if("function"==typeof define&&define.amd&&(define(e),n=!0),"object"==typeof exports&&(module.exports=e(),n=!0),!n){var t=window.Cookies,o=window.Cookies=e();o.noConflict=function(){return window.Cookies=t,o}}}(function(){function g(){for(var e=0,n={};e<arguments.length;e++){var t=arguments[e];for(var o in t)n[o]=t[o]}return n}return function e(l){function C(e,n,t){if("undefined"!=typeof document){if(1<arguments.length){"number"==typeof(t=g({path:"/"},C.defaults,t)).expires&&(t.expires=new Date(1*new Date+864e5*t.expires)),t.expires=t.expires?t.expires.toUTCString():"";try{var o=JSON.stringify(n);/^[\{\[]/.test(o)&&(n=o)}catch(e){}n=l.write?l.write(n,e):encodeURIComponent(String(n)).replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g,decodeURIComponent),e=encodeURIComponent(String(e)).replace(/%(23|24|26|2B|5E|60|7C)/g,decodeURIComponent).replace(/[\(\)]/g,escape);var r="";for(var i in t)t[i]&&(r+="; "+i,!0!==t[i]&&(r+="="+t[i].split(";")[0]));return document.cookie=e+"="+n+r}for(var c={},f=function(e){return e.replace(/(%[0-9A-Z]{2})+/g,decodeURIComponent)},a=document.cookie?document.cookie.split("; "):[],u=0;u<a.length;u++){var s=a[u].split("="),p=s.slice(1).join("=");this.json||'"'!==p.charAt(0)||(p=p.slice(1,-1));try{var d=f(s[0]);if(p=(l.read||l)(p,d)||f(p),this.json)try{p=JSON.parse(p)}catch(e){}if(c[d]=p,e===d)break}catch(e){}}return e?c[e]:c}}return(C.set=C).get=function(e){return C.call(C,e)},C.getJSON=function(e){return C.call({json:!0},e)},C.remove=function(e,n){C(e,"",g(n,{expires:-1}))},C.defaults={},C.withConverter=e,C}(function(){})});

            window.onload = function(e) {

                checkStatus();

                document.getElementById( 'gdpr' ).onclick = function(e) {
                    Cookies.set( 'gdpr', '1' );
                    checkStatus();
                }

                document.querySelector( '#disagreeWithGDPR a' ).onclick = function(e) {
                    Cookies.remove( 'gdpr' );
                    checkStatus();
                }

                function checkStatus() {

                    if( typeof Cookies.get( 'gdpr' ) !== 'undefined' ) {
                        document.getElementById( 'hasCompliedWith' ).innerHTML = 'YES';
                        document.getElementById( 'js-gdpr-consent-banner' ).classList.add("hidden");
                        document.querySelector( '#disagreeWithGDPR' ).style.display = 'block';
                    } else {
                        document.getElementById( 'hasCompliedWith' ).innerHTML = 'NO';
                        document.getElementById( 'js-gdpr-consent-banner' ).classList.remove("hidden");
                        document.querySelector( '#disagreeWithGDPR' ).style.display = 'none';
                    }
                }
            }

        </script>
    </body>
</html>

有点......非常荒谬，严肃地说，不得不写一个cookie，只是为了说你不会写任何cookie。 o.O

无论如何......这是一个非常基本的实现，从Stack Overflow自己的消息中借用标记和样式 - 每次清除cookie时都会显示，即使在此处关闭消息时，也会更新用户帐户的AJAX请求，哪个应不再为同一个用户显示该消息，毕竟他/她之前已经接受过。

例程使用Cookie操作的js-cookie's代码读取cookie的值（此处由JSCompress进行模糊处理）并显示接收消息，如果没有找到它，或者显示不同意GDPR的非常明确的方式用户之前已经同意的任何时间 - 即使用户尚未同意也没有阻止任何内容。

这个代码可能在这里不起作用。我必须启动我的PHP内置Web服务器才能以 http 而不是 file：///
来访问它

Answer 1

如果您在使用例如生成的静态网站上因 GDPR 而需要征求同意雨果，然后你可以把它存储在一个 cookie 中。 JavaScript 可用于读取 cookie，并仅在获得同意后激活任何需要同意的数据收集。

有关 GDPR 如何影响静态网站的更多信息，您还可以查看我的博文：GDPR for personal websites。有很多东西要考虑。

静态网站上的GDPR合规性

修改

1 个答案: