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 相关文章推荐
Tinymce+jQuery.Validation使用产生的BUG
Mar 29 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
Jul 04 Javascript
jquery设置表单元素为不可用的简单代码
Jul 04 Javascript
jQuery自定义组件(导入组件)
Nov 08 Javascript
form+iframe解决跨域上传文件的方法
Nov 18 Javascript
JavaScript实现拖拽元素对齐到网格(每次移动固定距离)
Nov 30 Javascript
node.js操作mongodb简单示例分享
May 25 Javascript
react-native fetch的具体使用方法
Nov 01 Javascript
angular 数据绑定之[]和{{}}的区别
Sep 25 Javascript
js实现黑白div块画空心的图形
Dec 13 Javascript
基于JavaScript实现单例模式
Oct 30 Javascript
浅谈Vue SSR中的Bundle的具有使用
Nov 21 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
PHP中动态HTML的输出技术
2006/10/09 PHP
开启CURL扩展,让服务器支持PHP curl函数(远程采集)
2011/03/19 PHP
PHP APC的安装与使用详解
2013/06/13 PHP
解析php扩展php_curl.dll不加载的解决方法
2013/06/26 PHP
浅析PHP程序设计中的MVC编程思想
2014/07/28 PHP
PHP SPL标准库之文件操作(SplFileInfo和SplFileObject)实例
2015/05/11 PHP
10个超级有用的PHP代码片段果断收藏
2015/09/23 PHP
让textarea控件的滚动条怎是位与最下方
2007/04/20 Javascript
Javascript 阻止javascript事件冒泡,获取控件ID值
2009/06/27 Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
2013/04/07 Javascript
javascript自定义函数参数传递为字符串格式
2014/07/29 Javascript
jQuery实现给页面换肤的方法
2015/05/30 Javascript
Ajax中解析Json的两种方法对比分析
2015/06/25 Javascript
基于jQuery实现的QQ表情插件
2015/08/25 Javascript
jQuery焦点图轮播特效代码分享(3款)
2015/09/05 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
学习JavaScript事件流和事件处理程序
2016/01/25 Javascript
jQuery on()绑定动态元素出现的问题小结
2016/02/19 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
2016/08/02 Javascript
基于nodejs+express4.X实现文件下载的实例代码
2017/07/13 NodeJs
element ui table 增加筛选的方法示例
2018/11/02 Javascript
JS实现查找数组中对象的属性值是否存在示例
2019/05/24 Javascript
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
jQuery模仿ToDoList实现简单的待办事项列表
2019/12/30 jQuery
[06:57]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD 选手采访
2021/03/11 DOTA
Python ftp上传文件
2016/02/13 Python
python+jinja2实现接口数据批量生成工具
2019/08/28 Python
Python高级特性之闭包与装饰器实例详解
2019/11/19 Python
Anaconda和ipython环境适配的实现
2020/04/22 Python
如何利用Python动态模拟太阳系运转
2020/09/04 Python
Clarks西班牙官方在线商店:clarks鞋
2019/05/03 全球购物
英国鲜花递送:Blossoming Gifts
2020/07/10 全球购物
华三通信H3C面试题
2015/05/15 面试题
教师节活动主持词
2014/04/02 职场文书
服务型党组织建设典型材料
2014/05/07 职场文书
党员领导干部承诺书
2014/05/28 职场文书