javascript - 如何添加 JavaScript cookie 同意警报在 3 分钟后消失
问题描述
这是一个有效的 JavaScript cookie 同意警报,但如果用户单击接受按钮,此警报不会消失。
我们需要 cookie 同意警报在 2 分钟后消失,当用户没有点击接受按钮时,这个怎么办?
此代码工作完美,还添加到 codepen https://codepen.io/MrUmang/pen/oNYZLej
cookieLaw = {
dId: "cookie-law-div",
bId: "cookie-law-button",
iId: "cookie-law-item",
show: function(e) {
if (localStorage.getItem(cookieLaw.iId)) return !1;
var o = document.createElement("div"),
i = document.createElement("p"),
t = document.createElement("button");
i.innerHTML = e.msg, t.id = cookieLaw.bId, t.innerHTML = e.ok, o.id = cookieLaw.dId, o.appendChild(t), o.appendChild(i), document.body.insertBefore(o, document.body.lastChild), t.addEventListener("click", cookieLaw.hide, !1)
},
hide: function() {
document.getElementById(cookieLaw.dId).outerHTML = "", localStorage.setItem(cookieLaw.iId, "1")
}
}, cookieLaw.show({
msg: "We use cookies to give you the best possible experience. By continuing to visit our website, you agree to the use of cookies as described in our <a href='https://sarkari.in/cookie-policy/'>Find out more.</a>",
ok: "Okay, thanks"
});
#cookie-law-div {
z-index: 10000000;
position: fixed;
bottom: 3%;
right: 2%;
padding: 5px 12px;
max-width: 400px;
border-radius: 10px;
background: #fff;
border: 1px solid rgba(0,0,0,.15);
font-size: 15px;
box-shadow: rgba(23,43,99,.4) 0 7px 28px;
}
#cookie-law-div a {
font-size: 15px;
text-decoration: none;
border-bottom: 1px solid rgba(0,0,0,.5);
}
#cookie-law-div a:hover {
opacity: .7;
}
#cookie-law-div p {
margin: 0;
color: #000;
padding-right: 70px;
}
#cookie-law-div button {
position: absolute;
right: .5em;
top: 20px;
align-self: center;
line-height: 33px;
color: #fff;
background-color: #000;
border: none;
opacity: .9;
font-size: 12px;
cursor: pointer;
border-radius: 19px;
}
#cookie-law-div button:hover {
opacity: 1;
}
@media (max-width:600px) {
#cookie-law-div {
border-radius: 0;
font-size: 13px;
max-width: 100%;
right: 0;
bottom: 0;
}
#cookie-law-div p {padding-right: 75px;}
}
解决方案
使用setTimeout 和 clearTimeout。代码已被修改为使用两个超时函数。
该属性定义调用函数timeout
之前要等待的秒数。cookieLaw.hide
该timeoutId
属性存储超时的 id,以便在执行clearTimeout
时可以通过函数调用将其删除cookieLaw.hide
。
cookieLaw = {
dId: "cookie-law-div",
bId: "cookie-law-button",
iId: "cookie-law-item",
timeout: 120,
timeoutId: -1,
show: function(e) {
if (localStorage.getItem(cookieLaw.iId)) return !1;
var o = document.createElement("div"),
i = document.createElement("p"),
t = document.createElement("button");
i.innerHTML = e.msg, t.id = cookieLaw.bId, t.innerHTML = e.ok, o.id = cookieLaw.dId, o.appendChild(t), o.appendChild(i), document.body.insertBefore(o, document.body.lastChild), t.addEventListener("click", cookieLaw.hide, !1);
cookieLaw.timeoutId = window.setTimeout(cookieLaw.hide, cookieLaw.timeout*1000);
},
hide: function() {
document.getElementById(cookieLaw.dId).outerHTML = "", localStorage.setItem(cookieLaw.iId, "1");
window.clearTimeout(cookieLaw.timeoutId);
}
}, cookieLaw.show({
msg: "We use cookies to give you the best possible experience. By continuing to visit our website, you agree to the use of cookies as described in our <a href='https://sarkari.in/cookie-policy/'>Find out more.</a>",
ok: "Okay, thanks"
});
#cookie-law-div {
z-index: 10000000;
position: fixed;
bottom: 3%;
right: 2%;
padding: 5px 12px;
max-width: 400px;
border-radius: 10px;
background: #fff;
border: 1px solid rgba(0,0,0,.15);
font-size: 15px;
box-shadow: rgba(23,43,99,.4) 0 7px 28px;
}
#cookie-law-div a {
font-size: 15px;
text-decoration: none;
border-bottom: 1px solid rgba(0,0,0,.5);
}
#cookie-law-div a:hover {
opacity: .7;
}
#cookie-law-div p {
margin: 0;
color: #000;
padding-right: 70px;
}
#cookie-law-div button {
position: absolute;
right: .5em;
top: 20px;
align-self: center;
line-height: 33px;
color: #fff;
background-color: #000;
border: none;
opacity: .9;
font-size: 12px;
cursor: pointer;
border-radius: 19px;
}
#cookie-law-div button:hover {
opacity: 1;
}
@media (max-width:600px) {
#cookie-law-div {
border-radius: 0;
font-size: 13px;
max-width: 100%;
right: 0;
bottom: 0;
}
#cookie-law-div p {padding-right: 75px;}
}
推荐阅读
- c - 无法在 Windows 上的 Linux 子系统中创建消息队列
- docker - 如何为 nginx docker 设置 ssl
- python-3.x - 'Python manage.py runserver' "ValueError: Unable to configure handler 'mail_admins'".:
- azure - 无法通过 az cli 创建预定查询 - 条件如何解析?
- asp.net - 必须在每次构建之前创建虚拟目录以防止错误
- python - 如何绕过 python 请求 SSL 和代理错误?
- c++ - 如何使用 std::reference_wrapper 作为类成员?
- google-analytics - Google Analytics(分析)代理检测如何工作?
- setuptools - 部署 python 包但不适用于 Windows
- reactjs - React 和 Redux:在 Redux 中存储加载状态的正确方法