JS/JQ►前端相关

XP 下 IE6、IE7、IE8 无法正常读取 cookie 的解决方法

近期的一个任务中，客户要求增加一个附带 cookie 记录的网站换肤功能。

网站换肤是老东西了，大体的思路就是写上一些 li 作为皮肤选项，点击之后使用 JavaScript 代码，修改网页中引用的 CSS 文件，达到换肤的目的。为了提供更好的用户体验，可以增加 cookie 记录功能，记录当前用户选择的皮肤。当下次用户再访问的时候，先读取 cookie 的内容，然后根据 cookie 内容自动切换到上次选择的皮肤。

出现问题

很正常的写完了 JavaScript 代码，测试都已经通过，在 IE10 的 IE7、8、9 渲染模式下也测试通过。这时候，客户反馈在 XP 下的 IE8 有问题：初次登陆无法显示默认皮肤、点击切换刷新之后无法显示切换后的皮肤。

因为是通过 cookie 来判断是否显示默认皮肤还是上次用户选择的皮肤，所以很理所当然就想到了无法读取 cookie 。启动 VMware 虚拟机，打开 IE8 和 IE Developer ToolBar 工具进行调试，发现点击之后 cookie 已经成功的创建，但是代码无法执行，使用控制台看了一下问题，原来是不支持 console 。

XP 下的 IE 浏览器不支持 console 命令

console 命令是控制台命令，用来调试 JavaScript 代码用的，通常使用 console.log() 函数来代替 alert() 来迅速得到某变量的内容等。由于 XP 下的 IE 不支持 console，导致后续代码无法运行。

解决方法就是删掉所有调试用的语句，这时候已经可以显示默认的皮肤样式了。

这里之所以说某些，是因为我也不知道哪句代码写的不完善。当我使用最基础的 alert(document.cookie) 返回所有的 cookie 内容时，返回值为空，使用 cookie 读取函数读取某值的时候，返回 undefined 。而在其他浏览器中都可以正常返回。

而奇怪的地方在于，我使用 IE developer toolbar 调试的时候，可以看到当前浏览器下面有 cookie 值。最初我以为是 cookie 读取函数写的有问题，因为毕竟有 cookie 的内容却读取不出来。前后换了 5 个不同写法的 cookie 读取函数。后来一想不对，因为使用 alert(document.cookie) 也无法返回任何内容，IE 不会连 document.cookie 都不支持吧？！难道是因为 cookie 生成函数？

这时候，客户给了个功能类似的示例网站，我打开测试了一下功能正常。既然别人的正常，肯定能实现。我阅读了一下它的代码，换肤功能使用的 styleswitcher.js 这个 JS 插件做出来的。由于实现步骤与现有网站不符，我无法使用这个插件整合，只能把它的生成 cookie 、读取 cookie 的函数抠下来用。代码如下：

function readCookie(name) {
  var nameEQ = name + “=”;
  var ca = document.cookie.split(‘;’);
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==’ ‘) c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return false;
}

function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days2460601000));
var expires = “; expires=”+date.toGMTString();
}
else expires = “”;
document.cookie = name+”=”+value+expires+”; path=/“;
}
然后问题就解决了，仔细看了一下代码，我写的也差不多，没有看出问题在哪。日后再仔细研究一下吧，如果你遇到了这样的问题，不妨使用上面这两个函数操作 cookie ，如果你知道问题所在，还望告知！