localStorage实现弹窗只显示三次

末蓝、 2022-05-27 03:19 185阅读 0赞

起因：  
公司经常做活动，所以需要首页弹出弹窗显示活动，提醒用户参加，所以最近经常有弹窗显示。  
但是有时候弹窗的显示只是提醒用户，并要求每天只显示三次（每天进来的前三次，次数过多用户太烦）。以往弹窗有优惠券，所以后台就有数据库记录用户的登录的此时，但是这次只是提醒用户，并不涉及后台操作，所以要求使用localStorage实现这个功能。  
要求：  
①弹窗在一段时间内使用  
②用户每天进来的前三次显示弹窗，其余时间不显示。  
具体实现：  
页面：

<?php if (($currentTime > $startTime) && ($currentTime < $endTime)):?>
    
    <div class="popup change-new" v-show="changeNewPopupShow && (changeNewNeedNotice < 3)">
      <div class="popup-mask" @click.stop="closeChangeNewPopup"></div>
      <figure class="img-box">
        <img src="http://img.cdn.aplum.com/o_1can9mic41drbu6m1trcmp21st78.png" alt="spring and summer change new popup bg image" />
        <div class="close-btn" @click.stop="closeChangeNewPopup"></div>
        <div class="use-now-btn" @click.stop="closeChangeNewPopup"></div>     
      </figure>
    </div>
    <?php endif;?>

通过php的时间管理弹窗的显示期间  
重点来了.  
首先我们根据要求中获取两个变量日期和次数。  
逻辑：  
当日期超出弹窗显示日期，不在进行任何操作  
如果用户第一次登陆或每天第一次登录则初始化两个变量  
如果用户非第一次登陆，增加次数，如果次数大于3，不在进行记录  
实现：

这里有一个地方需要注意：从localStorage获取的值类型是String,所以进行数学操作时，注意要进行类型转换