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 相关文章推荐
简单JS代码压缩器
Oct 12 Javascript
测试你的JS的掌握程度的代码
Dec 09 Javascript
JS异常处理的一个想法(sofish)
Mar 14 Javascript
用javascript为页面添加天气显示实现思路及代码
Dec 02 Javascript
用javascript关闭本窗口不弹出询问框的方法
Sep 12 Javascript
浅谈Javascript中Object与Function对象
Sep 26 Javascript
Ionic3 UI组件之autocomplete详解
Jun 08 Javascript
React 组件中的 bind(this)示例代码
Sep 16 Javascript
vue-cli2 构建速度优化的实现方法
Jan 08 Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
Jul 21 Javascript
vue 扩展现有组件的操作
Aug 14 Javascript
如何使用JS console.log()技巧提高工作效率
Oct 14 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
虫族 Zerg 魔法科技
2020/03/14 星际争霸
php环境套包 dedeampz 伪静态设置示例
2014/03/26 PHP
windows下安装php的memcache模块的方法
2015/04/07 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
PHP编程计算两个时间段是否有交集的实现方法(不算边界重叠)
2017/05/30 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
写js时遇到的一些小问题
2010/12/06 Javascript
js中return false(阻止)的用法
2013/08/14 Javascript
一个不错的js html页面倒计时可精确到秒
2014/10/22 Javascript
javascript中sort()的用法实例分析
2015/01/30 Javascript
BootStrap 轮播插件(carousel)支持左右手势滑动的方法(三种)
2016/07/07 Javascript
JS中的三个循环小结
2017/06/20 Javascript
vue2.0移除或更改的一些东西(移除index key)
2017/08/28 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
2018/02/13 jQuery
浅谈开发eslint规则
2018/10/01 Javascript
解决vue axios跨域 Request Method: OPTIONS问题(预检请求)
2020/08/14 Javascript
[48:29]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS KG
2018/03/31 DOTA
Python中的日期时间处理详解
2016/11/17 Python
python使用tcp实现局域网内文件传输
2020/03/20 Python
使用Python机器学习降低静态日志噪声
2018/09/29 Python
tensorflow之获取tensor的shape作为max_pool的ksize实例
2020/01/04 Python
浅谈Python 函数式编程
2020/06/20 Python
python打包生成so文件的实现
2020/10/30 Python
python try...finally...的实现方法
2020/11/25 Python
让IE6支持css3,让 IE7、IE8 都支持CSS3
2011/10/09 HTML / CSS
意大利奢侈品购物网站:Deliberti
2019/10/08 全球购物
应届大学生的推荐信
2013/11/20 职场文书
医大实习自我鉴定
2013/12/07 职场文书
毕业生求职自荐信怎么写
2014/01/08 职场文书
婚礼证婚人证婚词
2014/01/13 职场文书
人力资源总监工作说明
2014/03/03 职场文书
小学教师自我鉴定范文
2014/03/20 职场文书
经管应届生求职信范文
2014/05/18 职场文书
2015年护士节活动策划方案
2015/05/04 职场文书
2016党性教育学习心得体会
2016/01/21 职场文书
2019预备党员转正申请书模板2篇!
2019/08/07 职场文书