用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 相关文章推荐
JSON 教程 json入门学习笔记
Sep 22 Javascript
一个收集图片的bookmarlet(js 刷新页面中的图片)
May 27 Javascript
JavaScript函数定义的常见注意事项小结
Sep 16 Javascript
jQuery实现的仿百度分页足迹效果代码
Oct 30 Javascript
AngularJS 使用$sce控制代码安全检查
Jan 05 Javascript
详解Angular的内置过滤器和自定义过滤器【推荐】
Dec 26 Javascript
原生js实现水平方向无缝滚动
Jan 10 Javascript
Angular中使用$watch监听object属性值的变化(详解)
Apr 24 Javascript
vue.js源代码core scedule.js学习笔记
Jul 03 Javascript
React-Native左右联动List的示例代码
Sep 21 Javascript
React如何避免重渲染
Apr 10 Javascript
js监听html页面的上下滚动事件方法
Sep 11 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
日本十大惊悚动漫
2020/03/04 日漫
PHP基于CURL进行POST数据上传实例
2014/11/10 PHP
php使用指定编码导出mysql数据到csv文件的方法
2015/03/31 PHP
php session 写入数据库
2016/02/13 PHP
PHP用户验证和标签推荐的简单使用
2016/10/31 PHP
php cli模式下获取参数的方法
2017/05/05 PHP
PHP实现的文件上传类与用法详解
2017/07/05 PHP
laravel ORM 只开启created_at的几种方法总结
2018/01/29 PHP
JavaScript中常见陷阱小结
2010/04/27 Javascript
JS实现金额转换(将输入的阿拉伯数字)转换成中文的实现代码
2013/09/30 Javascript
jquery ztree实现下拉树形框使用到了json数据
2014/05/14 Javascript
jQuery插件制作的实例教程
2016/05/16 Javascript
判断输入的字符串是否是日期格式的简单方法
2016/07/11 Javascript
Javascript 动态改变imput type属性
2016/11/01 Javascript
浅谈Node.js:理解stream
2016/12/08 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
巧用weui.topTips验证数据的实例
2017/04/17 Javascript
webpack4 处理SCSS的方法示例
2018/09/03 Javascript
vue 解除鼠标的监听事件的方法
2019/11/13 Javascript
VUEX-action可以修改state吗
2019/11/19 Javascript
JS通用方法触发点击事件代码实例
2020/02/17 Javascript
python使用fork实现守护进程的方法
2017/11/16 Python
Python实现KNN邻近算法
2021/01/28 Python
12个步骤教你理解Python装饰器
2019/07/01 Python
Python装饰器的应用场景代码总结
2020/04/10 Python
jupyter notebook快速入门及使用详解
2020/11/13 Python
next在python中返回迭代器的实例方法
2020/12/15 Python
HTML5进度条特效
2014/12/18 HTML / CSS
欧洲高端品牌直销店:Fashionesta
2016/08/31 全球购物
Christys’ Hats官网:英国帽子制造商
2018/11/28 全球购物
工业自动化专业毕业生推荐信
2013/11/18 职场文书
七一党日活动总结
2014/07/08 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
秋季运动会开幕词
2015/01/28 职场文书
Python实战之疫苗研发情况可视化
2021/05/18 Python
Python多个MP4合成视频的实现方法
2021/07/16 Python