cookie 过期时间

cookie 为0或负数或不设置 关闭浏览器就失效

cookie 为正数 ,会写到磁盘临时文件,如果没有到失效时间,就一直有效,跟关闭浏览器与否没有关系

<think>嗯,用户问的是前端如何设置Cookie过期时间。首先,我得回忆一下Cookie的基本机制。Cookie可以通过JavaScript来设置,其中过期时间是一个重要的属性。 记得Cookie过期时间是通过`expires`或者`max-age`属性来控制的。`expires`接受一个GMT格式的日期字符串,而`max-age`则是以秒为单位的相对时间。不过要注意,有些旧版本的浏览器可能不支持`max-age`,所以可能需要同时设置这两个属性来确保兼容性。 接下来,我应该分步骤说明如何设置。比如,使用`document.cookie`来赋值,格式应该是"key=value; expires=date; path=/"。需要生成一个未来的日期,可以用`Date`对象,比如设置7天后过期,然后转换成UTC字符串。 然后,还要提到`max-age`的用法,比如设置`max-age=604800`(7天的秒数)。但要注意兼容性问题,可能的话同时设置`expires`和`max-age`会更稳妥。 另外,用户可能想知道不同框架或库中的方法,比如Vue或React中的操作,但其实底层还是调用原生JavaScript。不过可能需要提到第三方库如js-cookie,简化操作,比如`Cookies.set('name', 'value', { expires: 7 })`,这样更方便。 还需要提醒用户注意安全相关属性,比如`Secure`、`HttpOnly`,但这些通常在后端设置。前端设置时,路径`path`和域`domain`也很重要,确保Cookie在正确的范围和路径下生效。 最后,总结一下步骤,并给出示例代码,确保用户能清楚看到不同方法的实现。可能还要提到删除Cookie的方法,即设置过期时间为过去的时间,这样浏览器会自动删除。</think>好的,我来逐步解释前端设置 Cookie 过期时间的方法: --- ### 一、Cookie 过期机制 Cookie 通过 `expires` 或 `max-age` 属性控制过期时间- **`expires`**: 设置 GMT 格式的绝对时间 (如 `Thu, 01 Jan 2026 00:00:00 GMT`) - **`max-age`**: 设置以秒为单位的相对时间 (如 `604800` 表示 7 天) --- ### 二、原生 JavaScript 设置方法 #### 1. 使用 `expires` (兼容性更好) ```javascript // 设置 Cookie 并指定 7 天后过期 const date = new Date(); date.setTime(date.getTime() + 7 * 24 * 60 * 60 * 1000); // 计算 7 天后的时间戳 document.cookie = "username=John; expires=" + date.toUTCString() + "; path=/"; ``` #### 2. 使用 `max-age` (现代浏览器推荐) ```javascript // 设置 Cookie 并指定 1 小时后过期 (3600 秒) document.cookie = "theme=dark; max-age=3600; path=/"; ``` --- ### 三、兼容性写法 (同时指定两者) ```javascript const date = new Date(); date.setTime(date.getTime() + 365 * 24 * 60 * 60 * 1000); // 1 年后 document.cookie = `lang=zh-CN; expires=${date.toUTCString()}; max-age=31536000; path=/`; ``` --- ### 四、使用第三方库 (推荐) 通过 `js-cookie` 库简化操作: 1. 安装库 ```bash npm install js-cookie ``` 2. 代码示例 ```javascript import Cookies from 'js-cookie'; // 设置 30 分钟后过期 Cookies.set('token', 'abc123', { expires: 0.5 }); // 0.5 天 = 12 小时 // 设置 7 天后过期 Cookies.set('preferences', '{darkMode: true}', { expires: 7 }); ``` --- ### 五、注意事项 1. **路径与域**: ```javascript document.cookie = "key=value; expires=...; path=/; domain=.example.com"; ``` 2. **安全属性**: - `Secure`: 仅 HTTPS 协议传输 - `HttpOnly`: 禁止 JavaScript 访问 (需后端设置) - `SameSite`: 控制跨站请求 Cookie 发送 3. **删除 Cookie**: ```javascript document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/"; ``` --- ### 六、验证方法 通过浏览器开发者工具检查: 1. 打开 `Application` 面板 2. 在 `Storage > Cookies` 下查看具体域名 3. 确认 `Expires/Max-Age` 值是否符合预期 --- 通过上述方法,您可以精确控制 Cookie 的生命周期。建议优先使用 `max-age` 简化时间计算,同时注意生产环境中设置合理的过期时间以保证安全性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值