用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 相关文章推荐
JS Timing
Apr 21 Javascript
jQuery :nth-child前有无空格的区别分析
Jul 11 Javascript
JS 表单验证大全
Nov 23 Javascript
使用JS取得焦点(focus)元素代码
Mar 22 Javascript
用Move.js配合创建CSS3动画的入门指引
Jul 22 Javascript
JS未跨域操作iframe里的DOM
Jun 01 Javascript
Node.js如何自动审核团队的代码
Jul 20 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
Oct 24 Javascript
jquery实现tab键进行选择后enter键触发click行为
Mar 29 jQuery
详解Vue、element-ui、axios实现省市区三级联动
May 07 Javascript
VueCli3.0中集成MockApi的方法示例
Jul 05 Javascript
解决vue+ element ui 表单验证有值但验证失败问题
Jan 16 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 高性能书写
2010/12/11 PHP
PHP实现把数字ID转字母ID
2013/08/12 PHP
Yii2简单实现多语言配置的方法
2016/07/23 PHP
PHP实现统计代码行数小工具
2019/09/19 PHP
js鼠标滑过弹出层的定位IE6bug解决办法
2012/12/26 Javascript
jQuery探测位置的提示弹窗(toolTip box)详细解析
2013/11/14 Javascript
jquery和js实现对div的隐藏和显示方法
2014/09/26 Javascript
AngularJS基础知识笔记之表格
2015/05/10 Javascript
详解Javascript模板引擎mustache.js
2016/01/20 Javascript
jQuery validate插件实现ajax验证重复的2种方法
2016/01/22 Javascript
js操作XML文件的实现方法兼容IE与FireFox
2016/06/25 Javascript
jQuery中DOM节点的删除方法总结(超全面)
2017/01/22 Javascript
webpack3+React 的配置全解
2017/08/21 Javascript
React为 Vue 引入容器组件和展示组件的教程详解
2018/05/03 Javascript
vue仿element实现分页器效果
2018/09/13 Javascript
Nodejs中怎么实现函数的串行执行
2019/03/02 NodeJs
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
2019/08/16 Javascript
js实现单元格拖拽效果
2020/02/10 Javascript
jquery制作的移动端购物车效果完整示例
2020/02/24 jQuery
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
使用Python实现下载网易云音乐的高清MV
2015/03/16 Python
Django接受前端数据的几种方法总结
2016/11/04 Python
Python实现读取并保存文件的类
2017/05/11 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
python Pandas库基础分析之时间序列的处理详解
2019/07/13 Python
python实例化对象的具体方法
2020/06/17 Python
Python Process创建进程的2种方法详解
2021/01/25 Python
Ariat官网:美国马靴和服装品牌
2019/12/16 全球购物
毕业生优秀推荐信
2013/11/26 职场文书
经济管理专业毕业生自荐信范文
2014/01/02 职场文书
2014年中班元旦活动方案
2014/02/14 职场文书
2015年文明创建工作总结
2015/04/30 职场文书
2015年党务公开工作总结
2015/05/19 职场文书
jQuery ajax - getScript() 方法和getJSON方法
2021/05/14 jQuery
如何用vue实现网页截图你知道吗
2021/11/17 Vue.js
一次项目中Thinkphp绕过禁用函数的实战记录
2021/11/17 PHP