JS Cookie 增 改 (刪) 查 基本操作

功能

主要實現(xiàn)的功能是有個活動的結果彈窗需要每天進入頁面時自動彈出來一次,然后點擊關閉之后峡继,當天只彈出一次,直到活動結束 2018-1-1 為止


實現(xiàn)邏輯

  • 使用 addCookie SetCookie getCookie 三個公用的方法來實現(xiàn)操作
  • 首次載入頁面時先判斷當前時間是否在活動時間內宾添,之后使用 getCookie 判斷 cookie 是否存在:
    如果不存在使用 addCokie 添加 cookie(這里的 cookie 的值我設置為當天的日期值了)并彈出彈窗填硕;
    如果存在的話判斷 cookie 的值,如果等于當天的日期值彈出彈窗
  • 在關閉彈窗的時候也得先判斷是否有這個 cookie 炼吴,因為可能活動已經(jīng)結束了,再使用 SetCookie 對 cookie 的值進行修改疫衩,這里將當天的日期值加 1 后的值賦給 SetCookie 的第二個參數(shù)硅蹦,再用活動結束后的時間減去當天的時間最后算出離活動還有幾天的天數(shù),將這個天數(shù)的值當作是 SetCookie 的第三個參數(shù)闷煤,這里需要注意的是如果天數(shù)小于 1 那么這個方法執(zhí)行完之后會默認將 cookie 刪掉
  • 整個的執(zhí)行測試過程:在今天進入這個頁面之后因為沒有 cookie 會生成這個 cookie 童芹,cookie 的有效時間至活動結束之前(addCookie 的第三個參數(shù),這個是按照小時數(shù)換算的)鲤拿,cookie 的值(第二個參數(shù))設置為當天的日期假褪,這時點擊關閉彈窗的按鈕修改 cookie 的日期值,之后在今天的其他時間之內再次進入頁面的時候會進行日期判斷近顷,此時的日期值會是明天的所以不會彈出彈窗生音,到了第二天再次進入時因為日期值又相等了宁否,所以還會有彈窗,然后點擊關閉日期加 1 缀遍,這樣直至活動結束慕匠,最后在 2018-1-1 日進入時,彈出彈窗之后再點擊關閉按鈕域醇,時間相減的值取整數(shù)為 0 台谊,這樣 SetCookie 執(zhí)行后會自動將這個 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函數(shù)   
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;
    };
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末锅铅,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子减宣,更是在濱河造成了極大的恐慌狠角,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,183評論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件蚪腋,死亡現(xiàn)場離奇詭異丰歌,居然都是意外死亡,警方通過查閱死者的電腦和手機屉凯,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,850評論 3 399
  • 文/潘曉璐 我一進店門立帖,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人悠砚,你說我怎么就攤上這事晓勇。” “怎么了灌旧?”我有些...
    開封第一講書人閱讀 168,766評論 0 361
  • 文/不壞的土叔 我叫張陵绑咱,是天一觀的道長。 經(jīng)常有香客問我枢泰,道長描融,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,854評論 1 299
  • 正文 為了忘掉前任衡蚂,我火速辦了婚禮窿克,結果婚禮上,老公的妹妹穿的比我還像新娘毛甲。我一直安慰自己年叮,他們只是感情好,可當我...
    茶點故事閱讀 68,871評論 6 398
  • 文/花漫 我一把揭開白布玻募。 她就那樣靜靜地躺著只损,像睡著了一般。 火紅的嫁衣襯著肌膚如雪七咧。 梳的紋絲不亂的頭發(fā)上跃惫,一...
    開封第一講書人閱讀 52,457評論 1 311
  • 那天叮叹,我揣著相機與錄音,去河邊找鬼辈挂。 笑死衬横,一個胖子當著我的面吹牛,可吹牛的內容都是我干的终蒂。 我是一名探鬼主播蜂林,決...
    沈念sama閱讀 40,999評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼拇泣!你這毒婦竟也來了噪叙?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,914評論 0 277
  • 序言:老撾萬榮一對情侶失蹤霉翔,失蹤者是張志新(化名)和其女友劉穎睁蕾,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體债朵,經(jīng)...
    沈念sama閱讀 46,465評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡子眶,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,543評論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了序芦。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片臭杰。...
    茶點故事閱讀 40,675評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖谚中,靈堂內的尸體忽然破棺而出渴杆,到底是詐尸還是另有隱情,我是刑警寧澤宪塔,帶...
    沈念sama閱讀 36,354評論 5 351
  • 正文 年R本政府宣布磁奖,位于F島的核電站,受9級特大地震影響某筐,放射性物質發(fā)生泄漏比搭。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 42,029評論 3 335
  • 文/蒙蒙 一来吩、第九天 我趴在偏房一處隱蔽的房頂上張望敢辩。 院中可真熱鬧,春花似錦弟疆、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,514評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至仪糖,卻和暖如春柑司,著一層夾襖步出監(jiān)牢的瞬間迫肖,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,616評論 1 274
  • 我被黑心中介騙來泰國打工攒驰, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留蟆湖,地道東北人。 一個月前我還...
    沈念sama閱讀 49,091評論 3 378
  • 正文 我出身青樓玻粪,卻偏偏與公主長得像隅津,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子劲室,可洞房花燭夜當晚...
    茶點故事閱讀 45,685評論 2 360

推薦閱讀更多精彩內容

  • 什么是 Cookie “cookie 是存儲于訪問者的計算機中的變量伦仍。每當同一臺計算機通過瀏覽器請求某個頁面時,就...
    恩德_b0c2閱讀 409評論 0 3
  • 什么是 Cookie “cookie 是存儲于訪問者的計算機中的變量很洋。每當同一臺計算機通過瀏覽器請求某個頁面時充蓝,就...
    小旭同志閱讀 489評論 1 1
  • 如何修改一次代碼就可以完成多種類型 cell 的 UITableView 增刪修改順序? 前言 當一個 table...
    zhmbo閱讀 3,470評論 0 4
  • 遇到很多的人,然后又和很多的人遇到喉磁,形形色色的人來來往往适掰,已經(jīng)分不清誰本可能成為你生命的另一種格式葫盼,卻因各種理由而...
    會飛的烏龜閱讀 373評論 1 1