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


Posted in Javascript onDecember 03, 2014

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

}
Javascript 相关文章推荐
用javascript实现改变TEXTAREA滚动条和按钮的颜色,以及怎样让滚动条变得扁平
Apr 20 Javascript
js 目录列举函数
Nov 06 Javascript
js loading加载效果实现代码
Nov 24 Javascript
JavaScript中对JSON对象的基本操作示例
May 21 Javascript
BootStrap modal模态弹窗使用小结
Oct 26 Javascript
Vue.js如何优雅的进行form validation
Apr 07 Javascript
vue中,在本地缓存中读写数据的方法
Sep 21 Javascript
vue中tab选项卡的实现思路
Nov 25 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
Dec 22 Javascript
关于vue的npm run dev和npm run build的区别介绍
Jan 14 Javascript
Koa日志中间件封装开发详解
Mar 09 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
Sep 17 Javascript
js字符串完全替换函数分享
Dec 03 #Javascript
基于jquery实现等比缩放图片
Dec 03 #Javascript
javascript简单实现图片预加载
Dec 03 #Javascript
3种Jquery限制文本框只能输入数字字母的方法
Dec 03 #Javascript
javascript引擎长时间独占线程造成卡顿的解决方案
Dec 03 #Javascript
javascript中clone对象详解
Dec 03 #Javascript
javascript使用正则表达式检测IP地址
Dec 03 #Javascript
You might like
基于PHP实现生成随机水印图片
2020/12/09 PHP
EXT中xtype的含义分析
2010/01/07 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
jQuery学习笔记之jQuery原型属性和方法
2014/06/09 Javascript
JQuery中$.each 和$(selector).each()的区别详解
2015/03/13 Javascript
JS获取iframe中longdesc属性的方法
2015/04/01 Javascript
js select实现省市区联动选择
2020/04/17 Javascript
JAVA Web实时消息后台服务器推送技术---GoEasy
2016/11/04 Javascript
javascript实现简易计算器
2017/02/01 Javascript
jqgrid实现简单的单行编辑功能
2017/09/30 Javascript
详解Vue路由钩子及应用场景(小结)
2017/11/07 Javascript
vue登录路由验证的实现
2017/12/13 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
2018/08/29 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
vue点击页面空白处实现保存功能
2019/11/06 Javascript
Vue 实现登录界面验证码功能
2020/01/03 Javascript
python实现模拟按键,自动翻页看u17漫画
2015/03/17 Python
Python下线程之间的共享和释放示例
2015/05/04 Python
Python中的字符串操作和编码Unicode详解
2017/01/18 Python
python绘制双柱形图代码实例
2017/12/14 Python
Python面向对象之继承和组合用法实例分析
2018/08/27 Python
Python判断一个三位数是否为水仙花数的示例
2018/11/13 Python
PyCharm专业最新版2019.1安装步骤(含激活码)
2019/10/09 Python
Python 内置函数globals()和locals()对比详解
2019/12/23 Python
详解字符串在Python内部是如何省内存的
2020/02/03 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
意大利拉斐尔时尚购物网:Raffaello Network(支持中文)
2018/11/09 全球购物
意大利折扣和优惠券网站:Groupalia
2019/10/09 全球购物
公司新员工的演讲稿注意事项
2014/01/01 职场文书
歌唱比赛主持词
2014/03/18 职场文书
设计师求职信
2014/07/01 职场文书
法定代表人授权委托书范文
2014/09/22 职场文书
2015年乡镇卫生院妇幼保健工作总结
2015/05/19 职场文书
MySQL中存储时间的最佳实践指南
2021/07/01 MySQL
SQL Server远程连接的设置步骤(图文)
2022/03/23 SQL Server