时间戳

首页 > 解决方案 > 如何设置基本的香草 javascript if 语句来设置 cookie

javascript - 如何设置基本的香草 javascript if 语句来设置 cookie

问题描述

需要设置一个 cookie，以便年龄门在网站上只显示一次。

我试图使用 CMS 中的插件，但对于当前站点来说，它的版本太新了。所以我现在很迷茫，甚至不知道从哪里开始。

<script type="text/javascript">
        var age__gate = document.querySelector(".age__content");
        var age__gate__no = document.querySelector(".age__no");
        var age__check = document.querySelector(".age__check");

        var age__button__no = document.getElementById("age__No");
        var age__button__yes = document.getElementById("age__Yes");


        age__button__no.addEventListener("click", function() {
            age__gate.classList.add("is-active");
            age__gate__no.classList.add("is-active");
        });

        age__button__yes.addEventListener("click", function() {
            age__check.classList.add("is-active");

            document.cookie = 'age_confirmed=checked';
        });
 </script>

所以这是我到目前为止的脚本。我只需要一种方法将 age_confirmed=checked 附加到弹出窗口本身，这样它就不会显示。cookie 很好地存储在后端，但现在 CMS 代码不起作用，我不知所措。使这项工作的任何帮助都会很棒:)

编辑

整个 CMS 没有坏，只是存储 cookie 的插件坏了。

我觉得类似的东西应该起作用；

<script type="text/javascript">
        var age__gate = document.querySelector(".age__content");
        var age__gate__no = document.querySelector(".age__no");
        var age__check = document.querySelector(".age__check");

        var age__button__no = document.getElementById("age__No");
        var age__button__yes = document.getElementById("age__Yes");


        age__button__no.addEventListener("click", function() {
            age__gate.classList.add("is-active");
            age__gate__no.classList.add("is-active");
        });

        age__button__yes.addEventListener("click", function() {
            age__check.classList.add("is-active");

            document.cookie = 'age_confirmed=checked';

           if (age_confirmed == checked) {

            age__check.classList.remove("is-active");

           }
        });
 </script>

标签： javascript

解决方案

在你修复你的 CMS/后端/任何你可以玩的东西之前window.localStorage - 它（至少在欧洲）符合与存储 Cookie 相同的规定

有这个 HTML：

<label><input type="checkbox" id="age">Let me in, I am 18+</label>

这是JavaScript

// Put this chunk on every page (Fails if unset or if value is "minor")

if (localStorage.age !== 'adult') alert("You're not of legal age to see this content");



// Put this chunk where needed

const EL_age = document.querySelector("#age");
EL_age.addEventListener('change', () =>  localStorage.age = EL_age.checked ? 'adult' : 'minor');
EL_age.checked = localStorage.getItem('age') === 'adult'; // If found - update checkbox state

推荐阅读