如何将cookie或本地存储添加到HTML弹出窗口中

Question

我在网站上添加了一个弹出窗口，但每次重新加载页面时都会弹出，这真的很烦人。

我看了一些关于如何添加cookie的视频，但它不起作用。任何帮助都将不胜感激。

每个用户每天只能出现一次弹出窗口，我也可以尝试本地存储

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='popup' id="consent-popup">
<div class='cnt223'>
<div class="popupCloseButton">&times;</div>
<h1 style="font-size: 18px;">Mholweni, Hello, Goeie dag!</h1>
<p style="font-size: 14px;">We respect your rights. Please read our Usage Agreement <a href="https://www.saonline.africa/use.html" target="_blank" style="color: #1b305c !important; font-weight: 300;"><u>HERE</u></a>.</p>
<div class="popupAcceptButton"><font style="font-size: 15px;">I ACCEPT AND WANT TO PROCEED</font></div>
</div>
</div>

JavaScript

<script type='text/javascript'>
$(function(){
var overlay = $('<div id="overlay"></div>');
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
$('.popupCloseButton').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
}); 

$('.x').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
}); 
$('.popupAcceptButton').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
}); 

$('.x').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
});


</script>

Answer 1

使用localStorage，您可以通过这样的东西实现您想要的东西。您保存弹出窗口最后出现的日期，如果与今天不同，则再次显示弹出窗口并设置新日期。

const datesAreOnSameDay = (first, second) =>
first.getFullYear() === second.getFullYear() &&
first.getMonth() === second.getMonth() &&
first.getDate() === second.getDate();
const date = new Date();
const lastDateShown = localStorage.getItem('popup-appeared')
if(!lastDateShown || !datesAreOnSameDay(date, new Date(lastDateShown))) {
localStorage.setItem('popup-appeared', date)
// Display popup
}