用js讀、寫、刪除Cookie程式碼續篇_javascript技巧

上次的一篇文章：用js讀、寫、刪除Cookie程式碼分享及詳細註解說明，在實作中發現了一些問題：

1.cookie在本機檔案上只能在火狐上除錯，IE和chrome無效

2.cookie沒有設定為永不過期，只考慮了設定一個時間段就過期，顯然不太合理。

這次給的是比較合理的cookie操作代碼：

複製程式碼 程式碼如下:

var Cookie = {
    get: function (k) {
return ((new RegExp(["(?:; )?", k, "=([^;]*);?"].join(""))).test(document.cookie) && RegExp[" $1"]) || "";
    },
    set: function (k, v, e, d) {
        var date=new Date();
        var expiresDays=e;
        date.setTime(date.getTime() expiresDays*24*3600*1000);
        //若有設定時間，則在規定時間內使用cookie，否則就是永不過期
document.cookie=k "=" v "; expires=" (e != '' ? date.toGMTString(): "GMT_String") ";path=/;domain=" (d||'');
    },
    del: function (k) {
        var date=new Date();
        //將date設定為過去的時間
        date.setTime(date.getTime()-10000);
        document.cookie=k "=; expires=" date.toGMTString();
    }
};

範例示範的是：點選文字展開內容，再次點選隱藏。當內容為隱藏時，下次開啟還是隱藏的，當內容為顯示時，下次開啟還是顯示。

複製程式碼 程式碼如下:

 

收縮

 

  

展開後可見這裡的內容

 

var btn = document.getElementsByTagName('h3')[0];
btn.addEventListener('click',function(){
 var isClose = this.getAttribute('data-isClose');
 if(isClose == 'close'){
  show();
  Cookie.del('flag');
 }else{
  hide();
  Cookie.set('flag','hide');
 }
});
var tabCon = document.getElementById('tabCon');
function show(){
 tabCon.style.display = 'block';
 btn.setAttribute('data-isClose','open');
 btn.innerHTML = '收縮';
}
function hide(){
 tabCon.style.display = 'none';
 btn.setAttribute('data-isClose','close');
 btn.innerHTML = '展開';
}
var flag = Cookie.get('flag');
if(flag == 'hide'){
 hide();
}