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 相关文章推荐
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
Apr 03 Javascript
浅谈Javascript的静态属性和原型属性
May 07 Javascript
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
JavaScript实现简单图片轮播效果
Aug 21 Javascript
Vue 项目部署到服务器的问题解决方法
Dec 05 Javascript
微信开发之微信jssdk录音功能开发示例
Oct 22 Javascript
详解React 的几种条件渲染以及选择
Oct 23 Javascript
如何从0开始用node写一个自己的命令行程序
Dec 29 Javascript
js实现鼠标拖拽div左右滑动
Jan 15 Javascript
用js限制网页只在微信浏览器中打开(或者只能手机端访问)
Dec 24 Javascript
卸载vue2.0并升级vue_cli3.0的实例讲解
Feb 16 Javascript
通过js随机函数Math.random实现乱序
May 19 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
Ubuntu 16.04下安装PHP 7过程详解
2017/03/28 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
浅析showModalDialog数据缓存问题(用禁止浏览器缓存解决)
2013/07/09 Javascript
javascript常用函数(1)
2015/11/04 Javascript
表单中单选框添加选项和移除选项
2016/07/04 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
2017/09/01 Javascript
babel之配置文件.babelrc入门详解
2018/02/22 Javascript
Vue源码解析之数组变异的实现
2018/12/04 Javascript
玩转Koa之核心原理分析
2018/12/29 Javascript
vue.js中ref及$refs的使用方法解析
2019/10/08 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
2020/07/21 Javascript
探究Python中isalnum()方法的使用
2015/05/18 Python
Python 爬虫的工具列表大全
2016/01/31 Python
python记录程序运行时间的三种方法
2017/07/14 Python
python实现下载pop3邮件保存到本地
2018/06/19 Python
Python实现的登录验证系统完整案例【基于搭建的MVC框架】
2019/04/12 Python
Django REST framework 视图和路由详解
2019/07/19 Python
python中pygame安装过程(超级详细)
2019/08/04 Python
python中sort和sorted排序的实例方法
2019/08/26 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
对tensorflow中tf.nn.conv1d和layers.conv1d的区别详解
2020/02/11 Python
python Plotly绘图工具的简单使用
2020/03/03 Python
基于Python共轭梯度法与最速下降法之间的对比
2020/04/02 Python
Python基于当前时间批量创建文件
2020/05/07 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
HTML5如何实现元素拖拽
2016/03/11 HTML / CSS
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
2013/01/09 HTML / CSS
计算机专业毕业生求职信分享
2013/12/24 职场文书
户外活动策划方案
2014/03/12 职场文书
《诚实与信任》教学反思
2014/04/10 职场文书
汽车技术服务与贸易专业求职信
2014/07/20 职场文书
2015年行政部工作总结
2015/04/28 职场文书
年终工作总结范文
2019/06/20 职场文书
讨论nginx location 顺序问题
2022/05/30 Servers