JS Cookie 增改（删）查基本操作

功能

主要实现的功能是有个活动的结果弹窗需要每天进入页面时自动弹出来一次，然后点击关闭之后，当天只弹出一次，直到活动结束 2018-1-1 为止

实现逻辑

使用 addCookie SetCookie getCookie 三个公用的方法来实现操作
首次载入页面时先判断当前时间是否在活动时间内，之后使用 getCookie 判断 cookie 是否存在：
如果不存在使用 addCokie 添加 cookie（这里的 cookie 的值我设置为当天的日期值了）并弹出弹窗；
如果存在的话判断 cookie 的值，如果等于当天的日期值弹出弹窗
在关闭弹窗的时候也得先判断是否有这个 cookie ，因为可能活动已经结束了，再使用 SetCookie 对 cookie 的值进行修改，这里将当天的日期值加 1 后的值赋给 SetCookie 的第二个参数，再用活动结束后的时间减去当天的时间最后算出离活动还有几天的天数，将这个天数的值当作是 SetCookie 的第三个参数，这里需要注意的是如果天数小于 1 那么这个方法执行完之后会默认将 cookie 删掉
整个的执行测试过程：在今天进入这个页面之后因为没有 cookie 会生成这个 cookie ，cookie 的有效时间至活动结束之前（addCookie 的第三个参数，这个是按照小时数换算的），cookie 的值（第二个参数）设置为当天的日期，这时点击关闭弹窗的按钮修改 cookie 的日期值，之后在今天的其他时间之内再次进入页面的时候会进行日期判断，此时的日期值会是明天的所以不会弹出弹窗，到了第二天再次进入时因为日期值又相等了，所以还会有弹窗，然后点击关闭日期加 1 ，这样直至活动结束，最后在 2018-1-1 日进入时，弹出弹窗之后再点击关闭按钮，时间相减的值取整数为 0 ，这样 SetCookie 执行后会自动将这个 cookie 删掉了

贴代码

//三个公用方法
//添加cookie
function addCookie(objName, objValue, objHours) {
    var str = objName + "=" + escape(objValue);
    if (objHours > 0) {                               //为0时不设定过期时间，浏览器关闭时cookie自动消失
        var date = new Date();
        var ms = objHours * 3600 * 1000;
        date.setTime(date.getTime() + ms);
        str += "; expires=" + date.toGMTString();
    }
    document.cookie = str + "; path=/";
}
//修改cookie
function SetCookie(c_name, value, expiredays) {
    var exdate = new Date();
    exdate.setDate(exdate.getDate() + expiredays);
    document.cookie = c_name + "=" + escape(value) + ((expiredays == null) ? "" : ";expires=" + exdate.toGMTString()) + "; path=/";
}
//取cookies函数   
function getCookie(name) {
    var arr = document.cookie.match(new RegExp("(^| )" + name + "=([^;]*)(;|$)"));
    if (arr != null) return unescape(arr[2]); return null;
}

//页面脚本中用到的地方，下面的 #now_date1 的 value 是服务器获取的当前的百度时间 供 JS 调用
var nowDate = $('#now_date1').val();//服务器当前时间
  //增加弹窗 cookie 
    this.addpopupcookie = function () {
        var _me = this;
        var start = new Date(nowDate);
        var end = new Date('2018/1/2');
        if (start < end) {
            var cookiestr = getCookie('popuptoogle');
            if (!cookiestr) {
                var date = start.getDate() + '';
                var hours = parseInt((end - start) / 1000 / 3600);
                addCookie('popuptoogle', date, hours);
                $('.lay-popup5').show();
            } else if (parseInt(cookiestr) <= start.getDate()) {
                $('.lay-popup5').show();
            }
        }
        return _me;
    };
//公用的关闭弹窗
    this.closelaypopup = function (e) {
        var _me = this;
        //console.log(e.target.parentNode.parentNode.parentNode);
        if (e != null && getCookie('popuptoogle')) {
            if ($(e.target.parentNode.parentNode.parentNode).hasClass('lay-popup5')) {
                var now = new Date(nowDate);
                var date = now.getDate() + 1 + '';
                var days = parseInt((new Date('2018/1/2') - now) / 1000 / 3600 / 24);
                SetCookie('popuptoogle', date, days);
            }
        }
        $('#lay-popup-bg,.lay-popup').hide();
        _me.ioslayclosepopup();
        return _me;
    };

JS Cookie 增 改 （删） 查 基本操作

功能

实现逻辑

贴代码

推荐阅读更多精彩内容

JS Cookie 增改（删）查基本操作