前端操作cookie

博客围绕Cookie操作展开,虽无具体内容,但可知核心是对Cookie进行相关操作,这在前端开发中是常见且重要的内容,涉及到数据的存储与读取等。

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

// 获取cookie
function getCookie (name) {
   var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)")
   if (arr = document.cookie.match(reg)) {
   	 return unescape(arr[2])
   } else {
   	 return null
   }
}

// 设置cookie
function setCookie (c_name, value, days) {
    var exp = new Date()
    exp.setTime(exp.getTime() + days*24*60*60*1000);
    document.cookie = c_name + "=" + escape(value) + ";expires=" + exp.toGMTString()
}

// 删除cookie
function delCookie (name) {
  var exp = new Date()
  exp.setTime(exp.getTime() - 1)
  var cval = getCookie(name)
  if (cval != null)
    document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString()
}

 

<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、付费专栏及课程。

余额充值