时间戳

首页 > 解决方案 > 事件侦听器在 cookie 模式下不起作用

javascript - 事件侦听器在 cookie 模式下不起作用

问题描述

第一次来电，请轻点..

我正在我的 JavaScript 反射过程中并且遇到了 cookie 模式的问题。你需要能够在进入站点时弹出cookie，用户需要点击ok，它存储在本地，并且如果用户刷新浏览器不会弹出。

我创建了一个基本模式并编写了 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() ;
       });
     }
});

标签： javascriptcookiesmodal-dialogaddeventlistener

解决方案

您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')
})

推荐阅读