我正在努力制作这个Cookie-banner，唯一缺少的是如何保存它的隐藏值到本地存储，我不知道，如何做正确的代码，使它在刷新后保持隐藏。提前致谢
null
function cookies() {
var x = document.getElementById("cookie-banner");
if (x.style.display === "visible") {
x.style.display = "none";
}
else {
x.style.display = "none";
}
localStorage.setItem('cookie-banner', x.style.display = "hidden");
console.log(localStorage.setItem)
}<div id="cookie-banner" class="cookie-banner" style="display: visible">
<p>
lorem lorem lorem
<br>
<a href="https://www.learn-about-cookies.com/" target="blank">Learn more</a>
</p>
<button id="closecookie" onclick="cookies()">Got it</button>
</div>null
它出来了。
在页面加载时也需要设置初始值，请参见下面修改后的Js代码
//get the initial value of cookie banner
let initialValue = localStorage.getItem('cookie-banner');
var x = document.getElementById("cookie-banner");
// if it's not null then the value must have been set earlier
if(initialValue){
x.style.display = initialValue;
}
function cookies() {
if (x.style.display === "visible") {
x.style.display = "none";
}
else {
x.style.display = "none";
}
// set the new display value if it's changed
localStorage.setItem('cookie-banner', x.style.display);
console.log(localStorage.setItem)
}
我将您的代码重构为:
<div id="cookie-banner" class="cookie-banner" style="display: none">
<p>
lorem lorem lorem
<br>
<a href="https://www.learn-about-cookies.com/" target="blank">Learn more</a>
</p>
<button id="closecookie" onclick="hideBanner()">Got it</button>
</div>
// Run on page load to show cookie banner
function showBanner() {
var hideCookieBanner = localStorage.getItem('hideCookieBanner');
if(!hideCookieBanner) {
document.getElementById('cookie-banner').display = 'visible';
}
}
showBanner();
// Hide cookie banner & remember setting
function hideBanner() {
document.getElementById('cookie-banner').display = 'none';
localStorage.setItem('hideCookieBanner', true);
}
