事件侦听器无法在Cookie模式下工作

问题描述

第一次来这里的人，请保持温柔。

我正在进行JavaScript反思，但cookie模态有问题。您需要能够在进入网站时弹出cookie，用户需要单击“确定”，它存储在本地，并且如果用户刷新浏览器就不会弹出。

我已经创建了一个基本的模态并编写了JavaScript，该脚本部分起作用，但是eventHandler无法正常工作。

该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() ;
       });
     }
});

解决方法

您的代码中包含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')
})

,

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

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

每次您访问该页面时，它将总是设置为false。因此，即使将其设置为true，刷新时也会再次返回false。

删除该行应该可以，因为您无需将其设置为false