Cookie写入之path的坑：不同页面出现不同的Cookie

摘要：Cookie不仅仅有名字和值两个属性，还有域（domain），过期时间（expires），路径（path）等属性。其中，不同的域

今天遇到一个cookie的问题：域为http://xxx.com/index.htm与http://xxx.com/xxx/a-1.htm 的 cookie相同键，传递参数后出现不同值。搞了半天终于发现问题所在：原来是我关于cookie的基础知识没搞清楚。。。。

Cookie不仅仅有名字和值两个属性，还有域（domain），过期时间（expires），路径（path）等属性。其中，不同的域、不同的路径下可以存在同样名字的cookie。

问题

我在/page/index/index.html中向浏览器添加了一个useid的cookie（这里没有指定path）, 然后试着从/page/demo/demo.html中取值,发现无法取到,
通过开发者工具查看发现userid的path是/page/index/, 所以无法在page/demo/下面取到, 解决办法就是在添加cookie时指定path为/page/, 这时page目录下的所有页面都可以获取到userid

另外, path只能设置为绝对路径

js操作cookie

添加cookie

/**
 * 添加cookie
 * @param {String} objName
 * @param {String} objValue
 * @param {Number} objHours
 */
function addCookie(objName,objValue,objHours){
	var str = objName + "=" + escape(objValue);
	
	if(objHours > 0){ // 如果不设定过期时间, 浏览器关闭时cookie会自动消失
		var date = new Date()
		var ms = objHours * 3600 * 1000;
		
		date.setTime(date.getTime() + ms);
		str += "; expires=" + date.toGMTString() + "; path=/page/;"; // 指定了cookie的path
	}
	
	document.cookie = str;
}

获取cookie

/**
 * 获取指定名称的cookie值
 * @param {Object} objName
 */
function getCookie(objName) {
	var arrStr = document.cookie.split("; ");
	
	for (var i = 0; i < arrStr.length; i ++) {
		var temp = arrStr[i].split("=");
		
		if(temp[0] == objName) return unescape(temp[1]);
	}
}

删除cookie

/**
 * 删除指定名称的cookie值
 * @param {Object} objName
 */
function delCookie(objName) {
	var exp = new Date();
	exp.setTime(exp.getTime() - 1);
	var cval = getCookie(objName);
	if (cval != null) {
		document.cookie = objName + "=" + cval + "; expires=" + exp.toGMTString() + "; path=/page/;"; // 指定了cookie的path
	}
}

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_9325