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 相关文章推荐
WordPress 插件——CoolCode使用方法与下载
Jul 02 Javascript
JQUBar 基于JQUERY的柱状图插件
Nov 23 Javascript
jQuery动态设置form表单的enctype值(实现代码)
Jul 04 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
Feb 23 Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 Javascript
分享自己用JS做的扫雷小游戏
Feb 17 Javascript
聊一聊Vue.js过渡效果
Sep 07 Javascript
js中json处理总结之JSON.parse
Oct 14 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 Javascript
为什么要使用Vuex的介绍
Jan 19 Javascript
Nginx设置为Node.js的前端服务器方法总结
Mar 27 Javascript
vue 项目软键盘回车触发搜索事件
Sep 09 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生成不重复标识符的方法
2014/11/21 PHP
PHP入门教程之使用Mysqli操作数据库的方法(连接,查询,事务回滚等)
2016/09/11 PHP
php使用flock阻塞写入文件和非阻塞写入文件的实例讲解
2017/07/10 PHP
PHP设计模式之观察者模式定义与用法分析
2019/04/04 PHP
js控制iframe的高度/宽度让其自适应内容
2014/04/09 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
2017/07/13 jQuery
解决canvas画布使用fillRect()时高度出现双倍效果的问题
2017/08/03 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
2017/08/23 Javascript
js操作二进制数据方法
2018/03/03 Javascript
JavaScript设计模式之单例模式原理与用法实例分析
2018/07/26 Javascript
layer iframe 设置关闭按钮的方法
2019/09/12 Javascript
[07:38]2014DOTA2国际邀请赛 Newbee顺利挺进胜者组赛后专访
2014/07/15 DOTA
[41:08]TNC vs VG 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[55:42]VG vs VGJ.T 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python 排序算法总结及实例详解
2016/09/28 Python
使用pycharm设置控制台不换行的操作方法
2019/01/19 Python
用pycharm开发django项目示例代码
2019/06/13 Python
python取余运算符知识点详解
2019/06/27 Python
Python类继承和多态原理解析
2020/02/05 Python
Python编程快速上手——Excel到CSV的转换程序案例分析
2020/02/28 Python
windows下的pycharm安装及其设置中文菜单
2020/04/23 Python
用python实现前向分词最大匹配算法的示例代码
2020/08/06 Python
python3实现名片管理系统(控制台版)
2020/11/29 Python
CSS3中利用animation属性创建雪花飘落特效
2014/05/14 HTML / CSS
西班牙香水和化妆品网上商店:Douglas
2017/10/29 全球购物
什么是serialVersionUID
2016/03/04 面试题
某公司面试题
2012/03/05 面试题
完美实现CSS垂直居中的11种方法
2021/03/27 HTML / CSS
英语专业个人求职信范文
2014/02/01 职场文书
八项规定整改措施
2014/02/12 职场文书
关爱留守儿童标语
2014/06/18 职场文书
双拥工作宣传标语
2014/06/26 职场文书
批评与自我批评范文
2014/10/15 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
教您怎么制定西餐厅运营方案 ?
2019/07/05 职场文书
html+css实现环绕倒影加载特效
2021/07/07 HTML / CSS