如何解决事件侦听器无法在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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。