localStorage实现弹窗只显示三次

起因：
公司经常做活动，所以需要首页弹出弹窗显示活动，提醒用户参加，所以最近经常有弹窗显示。
但是有时候弹窗的显示只是提醒用户，并要求每天只显示三次（每天进来的前三次，次数过多用户太烦）。以往弹窗有优惠券，所以后台就有数据库记录用户的登录的此时，但是这次只是提醒用户，并不涉及后台操作，所以要求使用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，不在进行记录
实现：

var currentTime  = new Date(),
                    currentDay   = currentTime.getDate(),
                    newChangeDay = localStorage.getItem('newChangeDay')? (localStorage.getItem('newChangeDay') - 0):0,
                    _needNotice  = 0;
                if (currentDay >= 16) {
                    currentTime = null;
                    currentDay  = null;
                    newChangeDay= null;
                    _needNotice = null;
                    return ;
                }
                // localStorage.setItem('newChange', 0);
                //每日初始化login次数和当天日期 
                if ((!localStorage.getItem('newChange')) || (newChangeDay !== currentDay)) {
                    localStorage.setItem('newChange', 1);
                    localStorage.setItem('newChangeDay', currentDay);
                    this.changeNewNeedNotice = 1;
                    return ;
                }
                // 每日更新次数
                _needNotice = localStorage.getItem('newChange') - 0;
                this.changeNewNeedNotice = _needNotice;
                if (_needNotice > 3) {
                    return ;
                }
                localStorage.setItem('newChange', ++_needNotice);

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

localStorage实现弹窗只显示三次

猜你喜欢