代码之家  ›  专栏  ›  技术社区  ›  Kenshinh

如何在网站打开时禁用cookie

  •  0
  • Kenshinh  · 技术社区  · 6 年前

    如何在使用javascript打开网站时阻止某个cookie启动?然后,如果用户通过单击按钮同意cookie同意,则我需要允许此cookie。我可以用javascript来实现吗?

    2 回复  |  直到 6 年前
        1
  •  0
  •   Nadav    6 年前

    Cookies存储在最终用户的计算机上,任何网站都可以读取。也就是说,当网站加载时,cookies不会“启动”。您可以适当地添加前端或后端机制来利用这些cookies。因此,如果您想要一个按钮,您可以设置它,以便单击该按钮将创建一个新的cookie/sessionStorage变量(例如: enableOtherCookie ). 在另一个JavaScript代码块使用需要用户同意的Cookie之前,将在后续页面上检查此Cookie /变量的存在。

        2
  •  0
  •   Alex Tulic    6 年前

    最简单的方法是使用现有的第三方工具,如 Cookie Consent 它是免费和开放源码的。我和他们没有关系,但只是觉得这样做会让过程更容易。

    下面的示例将在允许Cookie之前插入一个请求opt-in权限的基本Cookie同意弹出窗口。如果您的目标是确保GDPR符合性,则需要确保跟踪脚本、cookies等在 //disable cookies 只有当用户选择加入时才设置和- //enable cookies .

    <html>
    <head>
      <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.css" />
      <script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script>
    </head>
    
    <body>
    </body>
    
    </html>
    
    window.addEventListener("load", function() {
      window.cookieconsent.initialise({
        onInitialise: function(status) {
          var type = this.options.type;
          var didConsent = this.hasConsented();
          if (type == "opt-in" && didConsent) {
            // enable cookies
          }
          if (type == "opt-out" && !didConsent) {
            // disable cookies
          }
        },
        onStatusChange: function(status, chosenBefore) {
          var type = this.options.type;
          var didConsent = this.hasConsented();
          if (type == "opt-in" && didConsent) {
            // enable cookies
          }
          if (type == "opt-out" && !didConsent) {
            // disable cookies
          }
        },
        onRevokeChoice: function() {
          var type = this.options.type;
          if (type == "opt-in") {
            // disable cookies
          }
          if (type == "opt-out") {
            // enable cookies
          }
        },
        palette: {
          popup: {
            background: "#252e39"
          },
          button: {
            background: "#14a7d0"
          }
        },
        showLink: false,
        type: "opt-in"
      });
    });
    

    Codepen