javascript与cookie 的问题详解


Posted in Javascript onNovember 11, 2013

原来用 js 读写 cookie 一直没有注意一个问题:
相同的 key 值,不同的 domain (locahost.dev.xxx.com, dev.xxx.com, xxx.com 等) 是可以同时存在于Cookie 里的 , document.cookie 能把这几个 cookie 都读出来,但是没有 domain 信息. 我也试着找用什么方法能把 cookie 的 domain 信息读取出来,可是很不幸, 没有找到(不知道你有没有什么方法能把 domain 信息给读出来, 如有,请赐教)
出现这个问题的场景:
刚开始的时候,是想让 本地(localhost.dev.xxx.com) 和 dev (dev.xxx.com) 与 uat (xxx.com) 环境的 cookie 互不影响, 我跟据 location.hostname 生成 cookieDomain

1 var cookieDomain = document.domain;   2 3  var tmp = location.hostname.split(.);   4 5  if(tmp.length > 2)6 7 cookieDomain = tmp.slice(1).join(.);
写 cookie 的时候,我把 domain 设为这个 cookieDomain , 这样一来, 不同的坏境的 cookie 就会写到不同的 domain 下面, 看似互不影响.
但是在取的时候, 可以取出来N个相同的 key 的 cookie 值来! 而我只取第一次出现的 cookie, 这样就造成了取出的值很有可能是错的. 就这个问题, 客户单位像狗皮膏药一样贴住我了!跟他们解释了N次,说你们对外只提供一个网址, 浏览者的电脑不会出现取值错误的情况(因为只有一个  domain ). 可是牙的每次BUG汇总里,总会把这个问题列出来! 所有解释等于对牛弹琴.
木折, 那我就把所有用 js 写的 cookie 写到根域名下吧, 省得这帮家伙叫来叫去,大问题不关注,小问题看贼细贼,本末倒置!

(function(){    // 清除旧版本的 cookie
    if(CTSZ.Cookie.get("cookieVersion") != Params.cookieVersion){
        var tmps = Params.orgDomain.split(.);
        var domain;
        var len = tmps.length;
        for(var i=0;i<= len - 3; i++){
            tmps.shift();
            domain = tmps.join(.);
            CTSZ.Cookie.empty("/", domain);
        }
        CTSZ.Cookie.set("cookieVersion", Params.cookieVersion, Params.cookieExpires, "/", Params.cookieDomain);
    }
})();

    $.Cookie = {};
    (function ($) {
        $.getExpires = function (y, m, d, h, i, s, ms) {
            var date = new Date();
            y = isNaN(y) ? date.getFullYear() : y;
            m = isNaN(m) ? date.getMonth() : m - 1;
            d = isNaN(d) ? date.getDate() : d;
            h = isNaN(h) ? date.getHours() : h;
            i = isNaN(i) ? date.getMinutes() : i;
            s = isNaN(s) ? date.getSeconds() : s;
            ms = isNaN(ms) ? date.getMilliseconds() : ms;
            return new Date(y, m, d, h, i, s, ms).toUTCString();
        }
        $.getExpiresByUTCString = function (UTCString) {
            var s = new Date(UTCString).toUTCString();
            if (s == NaN || s == Invalid Date)
                return null; // IE,Opera NaN , FF,Safari Invalid Date;
            else
                return s;
        }
        $.set = function (k, v, expires, path, domain, secure) {
            var cookie = k + = + encodeURIComponent(v);
            if (expires) cookie += ";expires=" + expires;
            if (path) cookie += ";path=" + path;
            if (domain) cookie += ";domain=" + domain;
            if (secure) cookie += ";secure";
            document.cookie = cookie;
        }
        /*
        以前是把所有 cookie 都取出放到一个对象里,在 get 的时候,直接从那个对象里取来,现在想想,那样并不正确。因为假如某个 cookie 的过期时间过了,那个对象并没有更新。
        */
        $.get = function (k) {
            var cks = document.cookie.split(;);
            var t;
            for (var i = 0; i < cks.length; i++) {
                t = cks[i].split(=);
                if (k == t[0].trim()) return t.length >= 2 ? decodeURIComponent(t[1]) : "";
            }
            return null;
        }
        $.remove = function (k, path, domain) {
            $.set(k, , $.getExpires(new Date().getFullYear() - 1), path, domain);
        }
        $.empty = function (path, domain) {
            var cks = document.cookie.split(;);
            var t;
            for (var i = 0; i < cks.length; i++) {
                $.remove(cks[i].split(=)[0].trim(), path, domain);
            }
        }
    })($.Cookie);
Javascript 相关文章推荐
javascript中关于break,continue的特殊用法与介绍
May 24 Javascript
offsetHeight在OnLoad中获取为0的现象
Jul 22 Javascript
jQuery简单入门示例之用户校验demo示例
Jul 09 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
Aug 29 Javascript
Vue.js动态组件解析
Sep 09 Javascript
Javascript 事件冒泡机制详细介绍
Oct 10 Javascript
JS实现的简单图片切换功能示例【测试可用】
Feb 14 Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 Javascript
详解vue.js的devtools安装
May 26 Javascript
对于input 框限定输入值为浮点型的js代码
Sep 25 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
May 15 Javascript
详解ES6 CLASS在微信小程序中的应用实例
Apr 24 Javascript
JavaScript设置首页和收藏页面的小例子
Nov 11 #Javascript
JS将表单导出成EXCEL的实例代码
Nov 11 #Javascript
AJAX跨域请求json数据的实现方法
Nov 11 #Javascript
Javascript弹出窗口的各种方法总结
Nov 11 #Javascript
探讨js中的双感叹号判断
Nov 11 #Javascript
js时间戳格式化成日期格式的多种方法
Nov 11 #Javascript
JavaScript中判断对象类型的几种方法总结
Nov 11 #Javascript
You might like
世界上第一台立体声收音机
2021/03/01 无线电
php使用文本统计访问量的方法
2016/05/12 PHP
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
2009/04/01 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
2011/12/14 Javascript
jquery插件制作 自增长输入框实现代码
2012/08/17 jQuery
jquery 获取表单元素里面的值示例代码
2013/07/28 Javascript
jQuery/CSS3图片特效插件整理推荐
2014/12/07 Javascript
jquery预加载图片的方法
2015/05/27 Javascript
React.js入门实例教程之创建hello world 的5种方式
2016/05/11 Javascript
原生js仿jquery实现对Ajax的封装
2016/10/04 Javascript
Angular ui.bootstrap.pagination分页
2017/01/20 Javascript
JS检测数组类型的方法小结
2017/03/14 Javascript
jQuery事件_动力节点Java学院整理
2017/07/05 jQuery
详解javascript对数组和json数组的操作
2019/04/15 Javascript
php结合js实现多条件组合查询
2019/05/28 Javascript
详解vue中v-bind:style效果的自定义指令
2020/01/21 Javascript
Python实现GUI学生信息管理系统
2020/04/05 Python
python with语句的原理与用法详解
2020/03/30 Python
python2和python3哪个使用率高
2020/06/23 Python
html5生成柱状图(条形图)效果的实例代码
2016/03/25 HTML / CSS
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
介绍一下OSI七层模型
2012/07/03 面试题
某公司面试题
2012/03/05 面试题
上班玩游戏检讨书
2014/02/07 职场文书
就业协议书
2014/09/12 职场文书
博士生专家推荐信
2014/09/26 职场文书
社区学习党的群众路线教育实践活动心得体会
2014/11/03 职场文书
离婚协议书范本
2015/01/26 职场文书
2015年父亲节活动总结
2015/02/12 职场文书
单位工资证明范本
2015/06/12 职场文书
2016大学生暑期社会实践心得体会
2016/01/14 职场文书
写给汽车4S店的创业计划书,拿来即用!
2019/08/09 职场文书
导游词之北京明十三陵
2019/10/28 职场文书
Python快速实现一键抠图功能的全过程
2021/06/29 Python
Python经常使用的一些内置函数
2022/04/11 Python
vue实现input输入模糊查询的三种方式
2022/08/14 Vue.js