cookie未设置path引发的大坑……

最新推荐文章于 2025-06-27 09:03:10 发布

桂小Z

最新推荐文章于 2025-06-27 09:03:10 发布

阅读量2.1w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： JavaScript web前端

本文链接：https://blog.youkuaiyun.com/qq_29305911/article/details/53447284

web前端同时被 2 个专栏收录

8 篇文章

订阅专栏

JavaScript

4 篇文章

订阅专栏

博客讲述了因未设置Cookie路径导致的页面状态错误，作者通过排查发现是由于不同页面作用域导致Cookie无法正确读取。解决方案是为Cookie设置路径参数`path=/`。此外，还介绍了Cookie的相关知识，包括限制、构成、安全性和子Cookie概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

知道答案之后发现这个问题很弱智，但是这种小东西往往也是很容易疏忽的……

昨天，我要写一段代码，就是通过cookie判断用户正在浏览的界面，然后高亮菜单栏相应的那个菜单。

一开始是这么写的……

function highLight(obj){
		var x=$(obj).index();
		document.cookie=encodeURIComponent("navIndex")+"="+encodeURIComponent(x)+";";
	}
$(function(){
		$('.leftnav li').click(function(){
			highLight(this)
		})
		var navIndex=document.cookie.split('navIndex=')[1];
		if(navIndex){
			navIndex=navIndex.split(';')[0];
		}else{
			navIndex=0;
		}
		$('.leftnav li:eq('+navIndex+')').find('a').addClass('now');
	})

结果，坑出现了。

我在highLight函数和$(function(){})函数里面分别alert了一个document.cookie。刚点击完一个索引为3的li的时候，弹出来

没错，结果等到跳转到索引为3的菜单所指向的页面的时候，就出问题了……

要么是这样的：

要么干脆是这样的：

我就百度，说为什么cookie设置完跳转页面值会变？答案五花八门，有一个答案说是生效时间的问题，我就加了个domain……结果，没用的。

然后就纠结啊纠结，直到实验室所在教学楼要锁门了，才恋恋不舍的关闭电脑，满腹心事的回到了宿舍……

但是路上，我灵机一动……作用域问题？？

跳转的两个界面并不是在同一个文件夹下的……

啊，好像是啊。每个页面加载完毕弹出来的cookie应该是上次停留在这个页面的时候设置的cookie，那么就很好理解，为什么cookie的数值要么不对，要么navIndex这个cookie干脆不存在了。

于是第二天，我就把代码改成了这样（加了path=/）：

        function highLight(obj){
		var x=$(obj).index();
		document.cookie=encodeURIComponent("navIndex")+"="+encodeURIComponent(x)+";path=/;";
	}
	$(function(){
		$('.leftnav li').click(function(){
			highLight(this)
		})
		var navIndex=document.cookie.split('navIndex=')[1];
		if(navIndex){
			navIndex=navIndex.split(';')[0];
		}else{
			navIndex=0;
		}
		$('.leftnav li:eq('+navIndex+')').find('a').addClass('now');
	})

大功告成！再一测试，果然没问题了。

BTW，既然说到了这里，就顺便再整理一下cookie相关知识。（参考书目：JavaScript 高级程序设计）

1、限制

cookie在性质上是绑定在特定的域名下的。当设定了一个cookie后，再给创建它的域名发送请求时，都会包含这个cookie。这个限制确保了存储在cookie中的信息只能让批准的接受者访问，而无法被其他域访问。

每个域的cookie总数是有限的，不同浏览器各有不同：

IE6及更低版本限制每个域名最多20个cookie。
IE7和之后版本每个域名最多50个。IE7最初是支持每个域名最大20个cookie，之后被微软的一个补丁所更新。
Firefox限制每个域最多50个cookie。
Opera限制每个域最多30个cookie。
Safari和Chrome对于每个域的cookie数量限制没有硬性规定。

2、cookie的构成

名称：不区分大小写。然而实践中最好看成是区分大小写的，因为某些服务器会这样处理cookie。cookie的名称必须是经过URL编码的。
值：必须被URL编码。
域：可以包含子域（subdomain，如www.wrox.com），也可以不包含（如.wrox.com。则对于wrox.com的所有子域都有效）。如果没有明确设定，那么这个域会被认作来自设置cookie的那个域。
路径：你可以指定cookie只有从http://www.wrox.com/books/中才能访问，那么http://www.wrox.com的页面就不会发送cookie信息。
失效时间：表示cookie何时应该被删除的时间戳。默认是在浏览器会话结束时将所有的cookie删除。值是一个GMT格式的日期（Wdy,DD-Mon-YYYY HH:MM:SS GMT），用于指定应该删除cookie的准确时间。如果设置的失效日期是个以前的时间，则cookie会被立即删除，。
安全标志：指定后，cookie只有在使用SSL连接的时候才发送到服务器。

3、子cookie

为了绕开浏览器的单域名下的cookie数限制，一些开发人员使用了一种称为子cookie（subcookie）的概念。子cookie是存放在单个cookie中的更小段的数据，也就是使用cookie值来存储多个名称值对儿。

如：

name=name1=value1&name2=value2&name3=value3&name4=value4&name5=value5