如何在 HTML 上的弹出窗口中添加 cookie 或本地存储

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
}