用js读、写、删除Cookie代码续篇

  上次的一篇文章:用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();

  }

  };

  例子演示的是:点击文字展开内容,再次点击隐藏。当内容为隐藏时,下次打开还是隐藏的,当内容为显示时,下次打开还是显示。

  

复制代码 代码如下:

  <div class="tab">

  <h3 class="tab-header">收缩</h3>

  <div class="tab-con" id="tabCon">

  <p>展开之后可见这里的内容</p>

  </div>

  </div>

  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();

  }