js中的 cookie有效期和地址设置的函数封装。

最新推荐文章于 2024-04-24 16:12:44 发布
原创 最新推荐文章于 2024-04-24 16:12:44 发布 · 392 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html5 #es6 #javascript

本文深入讲解了cookie的设置方法，包括如何设定有效期和路径。通过一个实用的JavaScript函数，演示了如何在网页中灵活地创建带有或不带有有效期及路径的cookie。无论你是初学者还是有经验的开发者，都能从中获得有价值的知识。

cookie设置方法，有无有效期的和地址都能设置。没有有效期的和地址时也能设置成默认值。
options为有效期和地址接收

 function setCookie(key,val,options){
       options为空没有设置
        ops = ops || {};
        // 有 有效期
        let e = "";
        if(ops.expires){
            var d = new Date();
            d.setDate( d.getDate() + ops.expires );
            e = ";expires="+d;
        }
        // 处理路径
        // let p = "";
        // if(ops.path){
        //     p = ";path="+ops.path;
        // }
        let p = ops.path ? ";path="+ops.path : "";
        document.cookie = `${key}=${val}${p}${e}`;
    }
pengzihui
关注
cookie && js-cookie使用-函数封装
qq_47000934的博客
07-28 569
cookie && js-cookie
javascript封装 Cookie 应用接口
10-23
4. **Cookie选项**：需要提供额外的参数来设置Cookie的有效期、路径、域和安全性等。 ### 实现细节 #### 写入Cookie 当写入Cookie时，我们通过指定键（name）和值（value）来设置Cookie。此外，可以指定Cookie的...
js设置cookie有效期，并获取存储的cookie值
chen_hongwei的博客
07-30 2102
// 设置cookie，setTime是用来设置有效期，下边代码expires为30时代表有效期30分钟 setCookie: function (cname, value, expires) { let date = new Date() date.setTime(date.getTime() + expires * 60 * 1000) document.cookie = cname + '=' + escape(value) + ';expires=' + date.to.
JS 设置Cookie 有效期 检测cookie
10-19
主要介绍了JS 设置Cookie 有效期 检测cookie的相关资料,需要的朋友可以参考下
cookie 设置有效期 检测cookie
weixin_33697898的博客
06-15 480
设置cookie 函数直接上代码： function setCookie(name, value, days) { //设置cookie var d = new Date(); d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000)); ...
js设置cookie过期时间
weixin_44694538的博客
11-05 2489
var name = 'one_name'; var value = '123'; var exp = new Date(); exp.setTime(exp.getTime() + 60 * 2000);//过期时间 2分钟 document.cookie = name + "=" + escape(value) + ";expires=" + exp...
利用js-cookie实现前端设置缓存数据定时失效
qq_41353397的博客
10-25 1345
方法一：利用localstorage实现 一、背景 业务需要在前端进行数据的缓存，到期就删除再进行获取新数据。 在项目开发中，我们可以写一个公用的方法来进行存储的时候加上时间戳 1、存储数据时加上时间戳 export function setLocalStorageAndTime (key, value) { window.localStorage.setItem(key, JSON.stringify({ data: value, time: new Date().getTime() })) } 2、
JavaScript中cookie工具函数封装的示例代码
10-21
总之，JavaScript中cookie工具函数封装是为了更好地管理页面状态和用户偏好设置，它提供了在不改变服务器状态的情况下，在客户端保存数据的能力。通过封装，我们可以将多个相关的功能组合在一起，使代码更加模块化、...
JS封装cookie操作函数实例(设置、读取、删除)
10-23
// 设置cookie有效期 document.cookie = name + '=' + value + ';expires=' + oDate; // 将cookie值添加到当前文档中 } ``` 在该函数中，`name` 和 `value` 是要设置的cookie的名称和值，`iDay` 为cookie的有效...
js 封装cookie操作的函数代码
10-27
函数setCookie接受三个参数：name（键名）、value（值）、iDay（有效期天数）。它首先会创建一个新的Date对象，然后通过setDate方法设置当前日期加上iDay天数为Cookie的过期时间。随后，通过拼接字符串的方式，将...
js设置cookie过期当前时间减去一秒相当于立即过期
10-25
主要介绍了设置js cookie过期(相当于清除浏览器对应名称的cookie)使用方法是当前时间减去一秒相当于立即过期
js存取cookie以及设置cookie储存时间
weixin_45791806的博客
05-07 2927
// 设置cookie expires储存时间按秒计算 function setUserCookie(name, value, expires) { var date = new Date(); date.setTime(date.getTime() + (expires * 1000)); document.cookie = name + "="+ escape (value) + ";expires=" + date.toGMTString();
Cookie的使用和设置有效期
编码青年的专栏
05-09 1万+
protected void Page_Load(object sender, EventArgs e) { //设置Cookies HttpCookie cookie = new HttpCookie("UserName","ZhangSan"); this.Request.Cookies.Add(cookie); //设
JavaScript--Cookie
m0_74293254的博客
08-07 847
在JavaScript中，cookie是一种小型的文本文件，它存储在用户的计算机上。通过使用cookie，网站可以向用户的浏览器发送数据，并将该数据保留在浏览器中，使网站能够在不同页面之间传递数据或存储用户偏好设置，以便在后续访问中进行读取和使用。
【JavaScript】cookie
小秀的博客
04-24 2495
cookie不可跨域cookie存储在浏览器里面cookie有数量与大小的限制1、数量在50个左右2、大小在4kb 左右cookie的存储时间非常灵活cookie不光可以服务器设置，客户端也可以设置客户端 document.cookie 可以获取和写入，且只能设置一次（在 http 协议下才可以生效）。set-cookie 服务器设置。参数 name: cookie 的名字（唯一性）；value: cookie 的值；domain: cookie 在哪个域名下是有效的；
js-cookie 设置过期时间
qq_42038997的博客
02-15 3576
【代码】js-cookie 设置过期时间。
JS 玩玩cookie（设置过期时间）
HelloJimmy520的专栏
02-02 6395
//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 +
JavaScript中Cookie的使用——设置失效时间
beekim的博客
09-04 1万+
1.什么是Cookie？ 1.1简介 主要用于存储访问过的网站数据，存储浏览器的信息到本地计算机中，用于客户端和服务器端的通讯 Cookie 是为了解决“如何记住用户信息”而发明的： 当用户访问网页时，他的名字可以存储在 cookie 中。 下次用户访问该页面时，cookie 会“记住”他的名字。 注意:如果浏览器完全禁止cookie,大多数网站的基本功能都将无法正常使用，chrome浏览器不支持本地文件的cookie的读取 1.2特点 以文本形式保存(.txt) cookie存储信息不安全（不能存放
js创建cookie js设置cookie过期时间
热门推荐
zhaochanglong的专栏
09-19 3万+
//取Cookie的值 function GetCookie(name) { var arg = name + "="; var alen = arg.length; var clen = document.cookie.length; var i = 0; while (i < clen) { var j = i + alen;
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]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值