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 兼容FF的onmouseenter和onmouseleave的代码
Jul 19 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
Jan 24 Javascript
JSON传递bool类型数据的处理方式介绍
Sep 18 Javascript
在JavaScript中处理字符串之link()方法的使用
Jun 08 Javascript
javascript数组随机排序实例分析
Jul 22 Javascript
javascript实现仿百度图片的瀑布流加载效果
Apr 20 Javascript
vue.js的安装方法
May 12 Javascript
Vue实现购物车场景下的应用
Nov 27 Javascript
vue-cli webpack模板项目搭建及打包时路径问题的解决方法
Feb 26 Javascript
vue获取data数据改变前后的值方法
Nov 07 Javascript
vue-cli脚手架的.babelrc文件用法说明
Sep 11 Javascript
详解vue中v-for的key唯一性
May 15 Vue.js
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中图片等比缩放的实例
2013/03/24 PHP
php删除左端与右端空格的方法
2014/11/29 PHP
Prototype ObjectRange对象学习
2009/07/19 Javascript
几个比较经典常用的jQuery小技巧
2010/03/01 Javascript
深入理解javascript原型链和继承
2014/09/23 Javascript
JS实现的网页倒计时数字时钟效果
2015/03/02 Javascript
JavaScript返回网页中超链接数量的方法
2015/04/03 Javascript
jQuery实现首页顶部可伸缩广告特效代码
2015/04/15 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
2015/09/04 Javascript
20分钟轻松创建自己的Bootstrap站点
2016/05/12 Javascript
jQuery移动端图片上传组件
2016/06/12 Javascript
JavaScript实现垂直向上无缝滚动特效代码
2016/11/23 Javascript
利用node.js搭建简单web服务器的方法教程
2017/02/20 Javascript
浅谈vue项目如何打包扔向服务器
2018/05/08 Javascript
JavaScript 判断对象中是否有某属性的常用方法
2018/06/14 Javascript
vuex直接赋值的三种方法总结
2018/09/16 Javascript
微信提示 在浏览器打开 效果实现过程解析
2019/09/10 Javascript
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
python实现求解列表中元素的排列和组合问题
2018/03/15 Python
将pip源更换到国内镜像的详细步骤
2019/04/07 Python
Django项目基础配置和基本使用过程解析
2019/11/25 Python
Pytorch 多维数组运算过程的索引处理方式
2019/12/27 Python
Python如何读写CSV文件
2020/08/13 Python
关于探究python中sys.argv时遇到的问题详解
2021/02/23 Python
美国Lolё官网:购买大胆而美丽的女性运动服装
2017/05/22 全球购物
天巡全球:Skyscanner Global
2017/06/20 全球购物
耐克波兰官方网站:Nike波兰
2019/09/03 全球购物
西安众合通用.net笔试题
2013/03/18 面试题
房地产员工找工作的自我评价
2013/11/15 职场文书
九月份红领巾广播稿
2014/01/22 职场文书
上班打牌检讨书
2014/02/07 职场文书
实验教师岗位职责
2014/02/13 职场文书
幼儿园老师寄语
2014/04/03 职场文书
安全协议书范本
2014/04/21 职场文书
党支部活动策划方案
2014/08/18 职场文书
nginx搭建图片服务器的过程详解(root和alias的区别)
2021/03/31 Servers