jQuery cookie紀錄網頁造訪次數判斷方法

9 月 8, 2015 | 文 | 0 comments

jQuery cookie應用方法

jquery.cookie.js 一個輕量級的cookie 插件，可以讀取、寫入、刪除cookie。

對cookies的操作在當訪問一個網站就無時無刻的都伴隨著我們，記錄著我們的一舉一動，並將不危害用戶隱私的信息，將以保存，這樣用戶就不用去從新再次操作重複的步驟，這樣大大方便了客戶，也增加了客戶對網站的回頭率。

jquery.cookie.js 提供了jquery中非常簡單的操作cookie的方法。

$.cookie('the_cookie'); // 獲得cookie
$.cookie('the_cookie', 'the_value'); // 設定cookie
$.cookie('the_cookie', 'the_value',{path:'/'}); // 設定cookie為整個網站有效
$.cookie('the_cookie', 'the_value', { expires: 7 }); //設定cookie有效時間7天
$.cookie('the_cookie', '', { expires: -1 }); // 删除
$.cookie('the_cookie', null); // 删除 cookie
$.cookie('the_cookie', 'the_value', {expires: 7, path: '/', domain: 'jquery.com', secure: true});//新建一個cookie 包括有效期 路徑 域名等

預設是以天為單位，這裡的方法處理設置，以毫秒為單位方法。

 var expireDate = new Date();
    expireDate.setTime( expireDate.getTime() + ( 1 * 60 * 60 * 1000 ) );//以【毫秒】為單位。這裡設定是1小時，若要設定1分鐘可(1*60*1000)
    $.cookie('the_cookie', 'the_value', { expires: expireDate });

+(160601000)裡面的1就是小時數，若要兩小時清除cookie，就可以這樣設定+(260601000)。要設定分鐘為單位只要將+(160601000)改為+(1601000)，就是一分鐘，而+(160*1000)裡面的1就是分鐘數。

jQuery cookie紀錄使用者造訪次數

以下範例使用jQuery coockie.js紀錄網站使用者造訪次數的方法，可在第幾次造訪後做出想要的動作。(cookie紀錄的方式是依照網站目錄的方式，如/abc目錄會紀錄一筆cookie，與/abc/abc為不同的cookie，若要設定整個網站有效的cookie，需要使用path:’/”設定整個網站為有效的cookie，如範例中的$.cookie("count", _count , { expires: 1 ,path:’/’ });，不加入path’/’，變數加總就不會依照整個網站加總，則依照你造訪的目錄去加總。)

$(function(){
        // 先判斷是否已有 cookie 值
        // 如果沒有則詢問名字並建立一筆新的 cookie
        if($.cookie("name")==null){
            var _hostname=window.location.hostname; //取得網址
                // 把 _name 跟 1 分別存在記錄中
                $.cookie("name", _hostname, { expires: 1 ,path:'/'}); //cookie紀錄一天"path:/"為整個網站有效
                $.cookie("count", 1, { expires: 1 ,path:'/' });//cookie紀錄一天"path:/"為整個網站有效
                $(".msg").html("歡迎來到"+_hostname + "，你是第1次拜訪本小站。");
             //var expireDate = new Date();
            // expireDate.setTime( expireDate.getTime() + ( 1 * 60 * 1000 ) );//以【毫秒】为单位。这里设置的是1分鐘
            // $.cookie("name", _hostname, { expires: expireDate });
            // $.cookie("count", 1, { expires: expireDate });           
        }else{
            // 取出記錄中的 name 跟 count
            var _hostname = $.cookie("name");
            var _count = $.cookie("count");
            $(".msg").html("歡迎來到"+_hostname + "，你是第 " + (++_count) + " 次拜訪本小站。");
            // 把加 1 之後的 count 寫回記錄中
            $.cookie("count", _count , { expires: 1 ,path:'/' }); //cookie紀錄一天"path:/"為整個網站有效
            if(_count==3){
                alert("提醒您今天是你第三次拜訪網站。");
            }
        }
});

Demo

JSfiddle 線上編輯Deom程式碼試試看Link

範例下載：Demo | Download 下載plugin：jquery.cookie.js