cookie属性及有效期的设置

最新推荐文章于 2025-07-10 11:56:14 发布
最新推荐文章于 2025-07-10 11:56:14 发布
阅读量3.3w 收藏 15
点赞数 3
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/WJLONG_123/article/details/78246995
本文详细介绍了如何在Chrome浏览器的控制台查看Cookie信息及其各种属性，包括name、value、domain、path、expires/Max-Age、Size、http和secure字段，并提供了设置Cookie有效期的多种方法。

chrome浏览器     控制台中的resources选项卡中可以看到cookie的信息。

cookie的属性：

name字段为一个cookie的名称。

value字段为一个cookie的值。

domain字段为可以访问此cookie的域名。

path字段为可以访问此cookie的页面路径。 比如domain是abc.com,path是/test，那么只有/test路径下的页面可以读取此cookie。

expires/Max-Age 字段为此cookie超时时间。若设置其值为一个时间，那么当到达此时间后，此cookie失效。不设置的话默认值是Session，意思是cookie会和session一起失效。当浏览器关闭(不是浏览器标签页，而是整个浏览器) 后，此cookie失效。

Size字段 此cookie大小。

http字段  cookie的httponly属性。若此属性为true，则只有在http请求头中会带有此cookie的信息，而不能通过document.cookie来访问此cookie。

secure 字段 设置是否只能通过https来传递此条cookie

有效期的设置：

1． dateadd法 
1)将期限设置为当前日期后的第N天的0时0分0秒 
Response.Cookies(“LastView”).Expires=dateadd(“d”,N,date) 
2)将期限设置为当前日期后的第N月的同一天的0时0分0秒 
Response.Cookies(“LastView”).Expires=dateadd(“m”,N,date) 
3)将期限设置到当前时间后的第N天的该时该分该秒 
Response.Cookies(“LastView”).Expires=dateadd(“d”,N,now) 
4)将期限设置到当前时间后的第N+M天的该时该分该秒 
Response.Cookies(“LastView”).Expires=dateadd(“d”,N,now+M) 
5)将期限设置到当前时间后的第N月的该时该分该秒 
Response.Cookies(“LastView”).Expires=dateadd(“m”,N,now) 
6)将期限设置到当前时间后的第N月的同一日后的第M天的该时该分该秒 
Response.Cookies(“LastView”).Expires=dateadd(“m”,N,now+M) 

2． 确定日期法 
1）将期限设置到某一日的0时0分0秒失效 
举例：到2003年1月29日0时0分0秒失效 
Response.Cookies(“LastView”).Expires=# 1/29/2003 # 
或 
Response.Cookies(“LastView”).Expires=# 2003/1/29 # 
或 
Response.Cookies(“LastView”).Expires=“January 29,2003” 
2)将期限设置到某一日的某一时刻失效 
举例：到2003年1月29日21时0分0秒失效 
Response.Cookies(“LastView”).Expires = #2003/1/29 21:00:00# 
或 
Response.Cookies(“LastView”).Expires = #1/29/2003 21:00:00# 
或 
Response.Cookies(“LastView”).Expires = #January 29,2003 21:00:00# 
其实，在这种方法中，用““ ””和“# #”的效果是一样的。例如 
Response.Cookies(“LastView”).Expires=“January 29,2003” 
和 
Response.Cookies(“LastView”).Expires=# January 29,2003 # 的效果就是相同的。 

3． date+ \now+ 法 
这种方法主要结构为Date+数学式或now +数学式。通过简单的四则运算的方法，将Cookie 的失效时间设置到当前时间后的某一段时间内。这里的加号都表示在当前时间的基础上加上预设时间。 
1)date+法 
如将期限设置为当前日期后的第N天的0时0分0秒，我们可以使用上述已谈到过的方法也可以使用如下格式： 
Response.Cookies(“LastView”).Expires=Date+N 
date+法是一种比较死的方法。它和上述方法差别不是很大，完全可以由上述几种方法代替。下面介绍now+法，这是一种比较灵活的方法，它可以将失效时间准确地定位到当前时间后的任意一年、一月、一天、一小时、一分、一秒。 
2)now+法 
先举一个例子： Response.Cookies(“LastView”).Expires = now+1 
这条语句的功能是：把Cookie的失效时间限制到1天后的同一时刻。这里的1代表1天，即24小时。由于now代表当前Web服务器的系统时间，包括年、月、日、时、分、秒，则该语句所表达得Cookie 的失效日期在明天的同一时、分、秒上。若改成now+2则表示此Cookie 的失效日期在两天后的同一时、分、秒上；now+30表示此Cookie 的失效日期在一个月后的同一时、分、秒上；now+30*2表示此Cookie 的失效日期在两个月后的同一时、分、秒上；now+365则表示此Cookie 的失效日期在一年后的同一时、分、秒上…… 
当把1分成24等份，即该语句变成： Response.Cookies(“LastView”).Expires = now+1/24则表示把Cookie的失效时间限制到一小时后。在此基础上，把1再分60等份，即把now+1/24改成 now+1/1440，则表示把Cookie的失效时间限制到一分钟后。这里的1440是由24*60得来。同理，要把Cookie的失效时间限制到十分钟后，则把程序变成Response.Cookies(“LastView”).Expires = now+10/1440；要把Cookie的失效时间限制到一秒钟后，则程序变成Response.Cookies(“LastView”).Expires = now+1/86400。当然，理论上把Cookie的失效时间限制到微秒级也是可以的。不过，那就没有什么实际意义了。另外，如果程序语句变成： Response.Cookies(“LastView”).Expires = now+1+1/1440则表示Cookie的失效时间为24小时零一分钟后。




WJLONG_123
关注
设置cookies过期时间的几种方法
爱码农爱生活
03-13 2420
  默认cookies失效时间是直到关闭浏览器，cookies失效，也可以指定cookies时间。 Response.Cookies("user_name").Expires=Date+1 '指定cookie保存时间 保留COOKIES一个小时 Response.Cookies("MyCookie").Expires= (now()+1/24) Response.Co...
cookie设置过期时间
阿毛的博客
05-08 6245
比如设置cookie xmin后过期 var date = new Date(); date.setTime(date.getTime() + (x * 60 * 1000)); $.cookie(‘example', ‘foo', { path: '/' ,expires: date });//xmin后过期 $.cookie(‘example', ‘foo', {path: '/' , expires: 7});//7天后过期，cookie默认是天为单位 jQuery操作cookie的插件,大概的使用
设置cookies过期时间的几种方法（cookies随浏览器关闭而失效的方法）
热门推荐
z542601362的专栏
09-03 7万+
cookies随浏览器关闭而失效的方法: 如果不设置Expires的属性那么Cookie的存活时间就是在关闭浏览器的时候。 默认cookies失效时间是直到关闭浏览器，cookies失效，也可以指定cookies时间。 Response.Cookies("user_name").Expires=Date+1 '指定cookie保存时间 保留COOKIES一个小时 Response.C
【cookie】设置cookie过期时间 超时时间，Cookie 设置 expires
sky___Show的博客
12-16 6238
Cookie是什么： 简单地说，cookie 就是浏览器储存在用户电脑上的一小段文本文件。cookie 是纯文本格式，不包含任何可执行的代码。一个 Web 页面或服务器告知浏览器按照一定规范来储存这些信息，并在随后的请求中将这些信息发送至服务器，Web 服务器就可以使用这些信息来识别不同的用户。大多数需要登录的网站在用户验证成功之后都会设置一个 cookie，只要这个 cookie 存在并可以，用户就可以自由浏览这个网站的任意页面。再次说明，cookie 只包含数据，就其本身而言并不有害。 设置Cookie
使用 vue-cookies 插件操作cookie,设置token有效期
coldriversnow的专栏
07-10 101
这篇文章介绍了如何在Vue项目中安装和配置vue-cookies插件，包括在main.js中全局引入，以及设置和管理Cookie的方法，如设置不同的过期时间和删除Cookie。同时，提供了设置、获取、删除和检查Cookie的代码示例。
如何设置cookies的过期时间
weixin_30394633的博客
09-02 2008
1． dateadd法 1)将期限设置为当前日期后的第N天的0时0分0秒 Response.Cookies(“LastView”).Expires=dateadd(“d”,N,date) 2)将期限设置为当前日期后的第N月的同一天的0时0分0秒 Response.Cookies(“LastView”).Expires=dateadd(“m”,N,date) 3)将期限设置到当前时间后的第N天的该时...
Cookie的过期时间设置
Celebrity_Senior的博客
10-07 3万+
Cookie的过期时间设置1.Cookie生存时间介绍 我们知道Cookie是一个键值对，但是Cookie不仅仅只有name和value属性，它还有以下几种属性： (1)注释：描述此 cookie 的用途； (2)路径：指的是浏览器将此 cookie 返回到服务器上的路径，并且该cookie 对于服务器上的所有子路径都是可见的。 (3)域限定符：创建 cookie时设置的域名，域名形式是根据
php 的cookie设置时间,php如何设置cookie过期时间
weixin_39628105的博客
03-09 347
php设置cookie过期时间的方法：可以利用setcookie()函数来进行设置。该函数用于向客户端发送一个HTTP cookie。具体使用方法如：【"mycookie", "123", time()+3600*24)】。setcookie() 函数向客户端发送一个 HTTP cookie。如果成功，该函数返回 TRUE。如果失败则返回 FALSE。(推荐教程：php视频教程)函数语法：setc...
cookies 设置过期时间
吴小花的博客
09-07 1326
F12-Application-Cookies可以查看到网页所有设置cookie值，如果设置了过期时间的cookie是可以看到过期时间的持久cookie（persistent cookie），没有设置过期时间的是会话cookie（session cookie）
JS 设置Cookie 有效期 检测cookie
10-19
了解如何使用JavaScript来设置和检测Cookie的有效期对于前端开发者来说是十分重要的技能。通过本文，我们将深入探讨JavaScript中设置Cookie有效期的方法以及如何检测特定的Cookie是否存在。 首先，我们来看如何使用...
nginx cookie有效期讨论小结
01-09
通过OpenResty，我们可以直接在Nginx中处理Cookie，比如使用`resty.cookie`库来设置Cookie的属性，包括有效期。 例如，要设置Cookie的有效期为24小时，可以使用以下代码： ```lua local cookie = resty_cookie:new...
JS如何设置cookie有效期为当天24点并弹出欢迎登陆界面
10-21
这篇教程主要讲解了如何使用JavaScript设置Cookie的有效期为当天24点，并在Cookie过期时弹出欢迎登录界面。 首先，我们需要了解`document.cookie`属性，它是JavaScript中用于读取和设置Cookie的一个字符串。设置...
PHP设置Cookie的HTTPONLY属性方法
12-18
1. **Cookie的生命周期**：可以通过设置过期时间控制Cookie的有效期，例如`setcookie("name", "value", time()+3600)`设置1小时有效期。 2. **Cookie路径和域**：可以指定Cookie在哪个URL路径或域名下生效，例如`...
如何设置Cookie的过期时间属性？
2501_90410679的博客
04-15 217
2. 选择合适的过期时间策略：该电商网站选择了一种常见的缓存周期策略，即在一段时间内可以保留用户的访问记录和使用权限。同时，为了避免频繁的登录验证和Cookie设置操作对用户造成不便，还采用了自动化登录验证的方式，减少用户手动设置的复杂性。3. 实现过期时间的配置：在该电商网站的服务器端配置中，使用特定的编程语言或框架实现了Cookie的过期时间设置功能。1. 确定需求和目标：该电商网站需要提高用户的使用体验和数据安全性，同时也要考虑如何应对用户频繁访问和清除Cookie的情况。1. 确定需求和目标。
操作cookie，并设置Cookie过期时间
昕颖的专栏
08-11 1938
//JS操作cookies方法!   //写cookies   function setCookie(name,value)   {   var Days = 30;   var exp = new Date();    exp.setTime(exp.getTime() + Days*24*60*60*1000);   document.cookie = name
设置cookie的过期时间
qwqasd123456的博客
09-02 759
function serCookie(name,value,exdays){ let d = new Date(); let time = exdays||30; d.setTime(d.getTime()+time*exdays*24*60*60*1000）； let expires = "expirse="+d.toUTCString(); document.co...
设置Cookie过期时间
weixin_46475440的博客
06-21 580
function setCookie(Cname, Cvalue, ExpiresTime) { const date = new Date() // 获取当前时间对象 const day = 1000 * 60 * 60 * 24 // 计算 一天 = 多少毫秒 date.setTime(date.getTime() + day * ExpiresTime) // 获取当前时间戳在加上（过期时间 * day变量）
vue3 如何使用cookie 设置一年有效期
最新发布
08-16
<think>我们正在使用Vue3，需要设置一个有效期为1年的Cookie。根据引用[1]中的信息，Cookie可以通过设置过期时间来实现长期保存。具体来说，如果我们设置Cookie的过期时间为当前时间加上1年，那么该Cookie将保存在客户端硬盘中，即使浏览器关闭也不会消失。 在JavaScript中，我们可以使用`document.cookie` API来设置Cookie。设置Cookie的格式如下： ``` document.cookie = "name=value; expires=expiration_time; path=path_value; domain=domain_value; secure"; ``` 其中，`expires`属性用于设置Cookie的过期时间，它必须是一个GMT格式的字符串。 步骤： 1. 创建一个Date对象，表示当前时间加上1年。 2. 将这个Date对象转换为GMT格式的字符串。 3. 使用`document.cookie`设置Cookie，包括名称、值、过期时间以及必要的路径和域。 注意：在Vue3中，我们通常会在组件的生命周期钩子（如mounted）或某个事件处理函数中执行设置Cookie的操作。 示例代码： ```javascript // 设置一个名为"my_cookie"，值为"my_value"，有效期1年的Cookie function setCookie() { const name = "my_cookie"; const value = "my_value"; // 计算1年后的时间 const expirationDate = new Date(); expirationDate.setFullYear(expirationDate.getFullYear() + 1); // 转换为GMT字符串 const expires = expirationDate.toUTCString(); // 设置Cookie，这里假设路径为根路径，可以根据需要修改 document.cookie = `${name}=${value}; expires=${expires}; path=/`; } ``` 但是，在Vue3中，我们可能会在组合式API中使用，例如在setup函数中或者使用`<script setup>`。我们可以将设置Cookie的操作封装成一个函数，然后在需要的地方调用。 另外，也可以使用第三方库来简化Cookie操作，比如`js-cookie`。使用该库可以更简洁地设置Cookie。 使用`js-cookie`库的示例： 1. 首先安装js-cookie： ```bash npm install js-cookie ``` 2. 在Vue3组件中使用： ```javascript import Cookies from 'js-cookie'; // 设置一个有效期为1年的Cookie Cookies.set('cookie_name', 'cookie_value', { expires: 365, path: '/' }); ``` 注意：`js-cookie`库中的`expires`属性可以接受天数（数字），这样我们就不需要手动计算日期了。这里设置365天即一年（注意闰年可能多一天，但一般按365天即可）。 如果不使用第三方库，我们也可以自己封装一个函数。但使用第三方库的好处是处理了边缘情况，比如特殊字符的编码等。 总结： - 使用原生JavaScript：需要自己处理日期格式和字符串拼接。 - 使用js-cookie库：更简单，推荐。 根据用户需求，这里我们提供两种方法。 注意：在服务端渲染（SSR）的场景下（如Nuxt.js），不能直接使用`document`对象，因为服务端没有document。此时需要做兼容处理，比如判断是否在浏览器环境中。或者使用专门为SSR设计的Cookie处理方式。 由于问题中没有提到服务端渲染，我们假设是客户端Vue应用。 原生JavaScript实现（在客户端）： ```javascript // 在Vue3组件中 export default { mounted() { this.setCookie('my_cookie', 'cookie_value', 365); }, methods: { setCookie(name, value, days) { const date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); const expires = "expires=" + date.toUTCString(); document.cookie = name + "=" + value + ";" + expires + ";path=/"; } } } ``` 使用js-cookie库（推荐）： ```javascript // 在Vue3组件中 import Cookies from 'js-cookie'; export default { mounted() { Cookies.set('cookie_name', 'cookie_value', { expires: 365, path: '/' }); } } ``` 或者使用组合式API（在setup中）： ```javascript import { onMounted } from 'vue'; import Cookies from 'js-cookie'; export default { setup() { onMounted(() => { Cookies.set('cookie_name', 'cookie_value', { expires: 365, path: '/' }); }); } } ``` 在`<script setup>`中： ```vue <script setup> import { onMounted } from 'vue'; import Cookies from 'js-cookie'; onMounted(() => { Cookies.set('cookie_name', 'cookie_value', { expires: 365, path: '/' }); }); </script> ``` 注意事项： - 设置Cookie时，如果涉及敏感信息，应该考虑使用Secure标志（仅HTTPS）和HttpOnly（防止XSS攻击）标志。但HttpOnly标志无法通过JavaScript设置，通常由服务器设置。 - 如果网站有跨域需求，可能需要设置domain属性。 根据引用[2]，Cookie有大小限制（4KB），所以不要存储过大的数据。 最后，请确保用户同意使用Cookie，以符合隐私政策（如GDPR）。 因此，在Vue3中设置有效期为1年的Cookie，推荐使用js-cookie库，简单可靠。</think>在 Vue3 中设置有效期为 1 年的 Cookie，可以通过原生 JavaScript 的 `document.cookie` API 或第三方库实现。以下是具体实现方法： ### 方法 1：使用原生 JavaScript（推荐） ```javascript // 设置 Cookie function setCookie(name, value) { const date = new Date(); date.setFullYear(date.getFullYear() + 1); // 设置 1 年后过期 const expires = "expires=" + date.toUTCString(); document.cookie = `${name}=${value}; ${expires}; path=/`; } // 在 Vue 组件中使用 import { onMounted } from 'vue'; export default { setup() { onMounted(() => { setCookie('user_token', 'abc123xyz'); // 设置名为 user_token 的 Cookie }); } } ``` ### 方法 2：使用 js-cookie 库（更简洁） 1. 安装库： ```bash npm install js-cookie ``` 2. 在 Vue 组件中使用： ```javascript import Cookies from 'js-cookie'; // 设置 1 年有效期的 Cookie Cookies.set('theme_preference', 'dark', { expires: 365, // 365 天 path: '/', // 全站有效 secure: true // 仅 HTTPS 传输（可选） }); // 读取 Cookie const theme = Cookies.get('theme_preference'); ``` ### 关键参数说明： 1. **expires**：有效期（单位：天） 2. **path**：Cookie 生效的路径（`/` 表示全站有效） 3. **domain**：作用域名（默认当前域名） 4. **secure**：仅通过 HTTPS 传输（生产环境建议启用） 5. **sameSite**：跨站策略（推荐 `Lax` 或 `Strict`） ### 注意事项： 1. **有效期计算**： 浏览器使用 GMT 时间格式，`setFullYear() + 1` 会自动处理闰年等复杂情况[^1]。 2. **存储限制**： 单个 Cookie 最大 4KB，同域名下总数有限制（通常 50 个左右）[^2]。 3. **安全建议**： - 敏感数据（如登录凭证）建议添加 `HttpOnly` 标志（需后端设置） - 生产环境启用 `secure` 属性强制 HTTPS 传输 - 使用 `SameSite=Lax/Strict` 防止 CSRF 攻击 4. **替代方案**： 对于需要存储较大数据（>4KB）的场景，可使用： ```javascript // LocalStorage（永久存储） localStorage.setItem('user_settings', JSON.stringify({ theme: 'dark' })); // SessionStorage（标签页关闭失效） sessionStorage.setItem('temp_data', 'value'); ``` ### 完整示例（Vue3 组合式 API）： ```vue <script setup> import { ref } from 'vue'; import Cookies from 'js-cookie'; const user = ref(null); // 设置登录 Cookie const login = () => { Cookies.set('auth_token', 'encrypted_data_here', { expires: 365, path: '/', secure: import.meta.env.PROD // 生产环境启用 HTTPS }); user.value = { name: 'John' }; }; // 清除 Cookie const logout = () => { Cookies.remove('auth_token'); user.value = null; }; </script> ``` > **提示**：对于需要服务器参与的认证场景（如 Session ID），建议结合后端设置 `HttpOnly` Cookie 提高安全性[^1][^4]。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值