如何添加JavaScript cookie同意警报在时间3分钟后消失

Question

这是一个有效的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;}
}

Answer 1

使用setTimeout和clearTimeout。代码已被修改以使用两个超时函数。

timeout属性定义了在调用cookieLaw.hide函数之前等待的秒数。

timeoutId属性存储了超时的id，以便在cookieLaw.hide执行时通过clearTimeout函数调用将其移除。

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;}
}