开发者问题收集

事件监听器在 cookie 模式中不起作用

2020-08-13
624
javascript cookies modal-dialog addeventlistener

第一次来电，请温柔一点。

我正在 JavaScript 反射过程中遇到 cookie 模式问题。您需要能够在进入网站时弹出 cookie，用户需要单击“确定”，它存储在本地，并且不会在用户刷新浏览器时弹出。

我创建了一个基本模式并编写了 JavaScript，部分工作正常，但事件处理程序不起作用。

cookie 值为 false，您可以在控制台中看到它，但是当您单击按钮时，它不会变为 true。

我已将代码放在下面，如果有人能帮忙，我将不胜感激。 

<div id ="overlay">
    <div class="modal">
      <p>
      </p>
    </div>
        <button class="settings_button">CHANGE SETTINGS</button>
        <button class="modal_accept_button">ACCEPT COOKIES</button>
            <button class="modal_accept_button">Accept</button>
 </div>

    
let modalObject = document.querySelector(".modal");
let modalSettings = document.querySelector('.settings_button');
let modalAccept = document.querySelector('.modal_accept_button');
let modalOverlay = document.querySelector("#overlay");

function showModal() {
  modalObject.classList.remove('deactive');
  modalOverlay.classList.remove('deactive');
}

function disableModal() {
  modalObject.classList.add('deactive');
  modalOverlay.classList.add('deactive');
}

localStorage.setItem('cookie', 'false');

window.addEventListener('DOMContentLoaded', () => {
     if (localStorage.getItem('cookie') == 'true') {
       console.log("Cookie is already in place.");
     } else if (localStorage.getItem('cookie') === null ||
     localStorage.getItem("Cookie accepted") == 'false') {
      console.log("Cookie has been not yet been accepted.");
      showModal();
      modalAccept.addEventListener('click', () => {
          localStorage.setItem('cookie','true');
          disableModal() ;
       });
     }
});
2个回答

在您的代码中，有一行将其设置为 false： 

localStorage.setItem('cookie', 'false');

每次您访问该页面时，这将 始终 将其设置为 false。因此，即使您将其设置为 true，当您刷新时，它也会再次变为 false。

删除该行应该有效，因为您不需要将其设置为 false

Emre Koc
2020-08-13

您的代码中有 localStorage.setItem('cookie', 'false'); ，这会在每次运行代码时将您的 ls 更改为 false， 只需将其删除 ，我认为最好将本地存储保存在变量中，然后在 if 语句中使用该变量： 

const modal = document.querySelector('.modal');
const acceptBtn = document.querySelector('#acceptCookies');


(() => {
 const isCookieAccepted = JSON.parse(window.localStorage.getItem('cookie'));
  
 if (isCookieAccepted) {
  alert(`Cookie status: ${isCookieAccepted}`)
 } else {
  modal.classList.add('show')
 }
})();

acceptBtn.addEventListener('click', () => {
 window.localStorage.setItem('cookie', true);
 modal.classList.remove('show')
})
Ari Shojaei
2020-08-13