当使用javascript或jquery设置cookie时，如果遇到过期时间不生效或与预期不符的问题，通常是由于`expires`属性的兼容性或计算方式导致。推荐使用`max-age`属性，它以秒为单位指定cookie的存活时间，提供更稳定和可靠的跨浏览器行为。本文将深入探讨这一问题，并提供基于`max-age`的最佳实践代码示例，确保cookie按预期过期。
理解Cookie过期机制
Web Cookie是浏览器存储少量数据的一种方式，每个Cookie都有一个生命周期。控制Cookie生命周期的主要属性是expires和max-age。
- expires属性：指定Cookie的绝对过期时间，通常是一个GMT（格林尼治标准时间）格式的日期字符串。浏览器会在到达这个时间后删除Cookie。它的缺点在于对日期格式的严格要求和潜在的时区问题，不同浏览器或系统可能对日期字符串的解析存在细微差异。
- max-age属性：指定Cookie从创建时刻开始的相对过期时间，以秒为单位。这是一个更现代且推荐的方式，因为它避免了日期格式和时区带来的复杂性，浏览器会根据当前时间加上max-age的值来计算实际过期时间。
当expires和max-age同时存在时，max-age通常会优先。
expires属性的潜在问题
在某些情况下，即使开发者在JavaScript中正确计算了expires日期并将其转换为UTC字符串，Cookie仍可能提前过期（例如，仅在2小时后）。这可能由以下原因导致：
- 日期格式或时区解析问题：虽然Date.toUTCString()方法可以生成GMT格式的日期字符串，但不同的浏览器或客户端操作系统在解析这个字符串时可能存在差异，尤其是在处理时区或夏令时转换时。
- 浏览器缓存或优化行为：某些浏览器可能会对Cookie的过期行为进行内部优化或处理，导致与预期不符。
- 代码逻辑错误：虽然在提供的示例中计算逻辑看起来是正确的（exdays * 24 * 60 * 60 * 1000），但任何细微的错误都可能导致日期计算不准确。
原始的setCookie函数示例如下，它使用了expires属性：
立即学习“Java免费学习笔记（深入）”；
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000)); // 计算毫秒数
var expires = "expires=" + d.toUTCString(); // 转换为GMT字符串
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}
// 示例调用：
// setCookie('popupCookie', 'closed', 99999); // 尝试设置一个很长的过期时间尽管这段代码在某些环境下可能正常工作，但在其他环境下却可能出现过期时间不生效的问题。
推荐方案：使用max-age属性
为了避免expires属性带来的潜在问题，强烈建议使用max-age属性来设置Cookie的过期时间。max-age以秒为单位，直接指定Cookie的存活时长，更加直观和稳定。
以下是使用max-age属性设置Cookie的标准方法：
document.cookie = "popupCookie=submited; max-age=31536000; path=/";
在这个例子中：
- popupCookie=submited：设置Cookie的名称和值。
- max-age=31536000：设置Cookie的存活时间为31536000秒，这大约等于1年（365天 24小时 60分钟 * 60秒）。您可以根据需要调整这个值。
- path=/：指定Cookie在网站的根路径下可用，这意味着网站上的所有页面都可以访问这个Cookie。
完整示例与最佳实践
为了提供一个更通用的Cookie设置函数，我们可以将其改造为支持max-age：
/**
* 设置一个Cookie
* @param {string} name Cookie的名称
* @param {string} value Cookie的值
* @param {number} maxAgeSeconds Cookie的存活时间，以秒为单位
* @param {string} path Cookie的路径，默认为'/'
* @param {string} domain Cookie的域
* @param {boolean} secure 是否只在HTTPS连接下发送Cookie
* @param {boolean} httpOnly 是否禁止JavaScript访问Cookie (此函数无法设置，需服务器端设置)
*/
function setCookieWithMaxAge(name, value, maxAgeSeconds, path = '/', domain = '', secure = false) {
let cookieString = `${name}=${value}`;
if (maxAgeSeconds !== undefined && maxAgeSeconds !== null) {
cookieString += `; max-age=${maxAgeSeconds}`;
}
if (path) {
cookieString += `; path=${path}`;
}
if (domain) {
cookieString += `; domain=${domain}`;
}
if (secure) {
cookieString += `; secure`;
}
document.cookie = cookieString;
}
// 结合原始的点击事件示例
$('button.close').click(function(){
// 假设我们希望Cookie在1年（31536000秒）后过期
setCookieWithMaxAge('popupCookie', 'closed', 31536000);
// 其他操作...
hcontent();
});
$('button.submit').click(function(){
$('.popup-overlay').fadeOut();
$('#id').hide();
// 同样设置1年过期
setCookieWithMaxAge('popupCookie', 'submited', 31536000);
});
// 如果需要设置一个会话Cookie（浏览器关闭即失效），可以不设置max-age或expires
// setCookieWithMaxAge('sessionCookie', 'someValue');注意事项：
- max-age值为0或负数：将max-age设置为0或负数可以立即删除一个Cookie。
- path属性：指定Cookie对哪些路径可见。path=/表示对整个网站可见。如果未指定，默认为当前页面所在的目录。
- domain属性：指定Cookie对哪个域可见。例如，domain=example.com表示example.com及其所有子域（如www.example.com）都可以访问。如果不设置，默认为当前文档的域。
- secure属性：如果设置了secure，则Cookie只会在HTTPS连接下发送到服务器。
- HttpOnly属性：这个属性不能通过JavaScript设置，必须在服务器端设置。它指示浏览器禁止客户端脚本（如JavaScript）访问Cookie，有助于防止跨站脚本攻击（XSS）。
总结
当您在JavaScript或jQuery中遇到Cookie过期时间不生效的问题时，最可靠的解决方案是将expires属性替换为max-age属性。max-age以秒为单位指定Cookie的存活时间，避免了日期格式和时区转换的复杂性，提供了更一致和稳定的跨浏览器行为。通过采用这种最佳实践，您可以确保Cookie按照预期管理其生命周期。同时，不要忘记合理设置path、domain和secure等其他重要属性，以增强Cookie的安全性与可用性。
