当前位置:首页 > 网络科技 > JavaScript 管理 Cookie 函数,兼容 secure、samesite 属性

JavaScript 管理 Cookie 函数,兼容 secure、samesite 属性

10个月前 (08-27)admin网络科技44

自从拥有 leixue.com 域名后,泪雪旗下的网站都在开始切换域名和做一些改版,在把泪雪网小程序开发完成后,近期又在折腾泪雪个人中心(i.leixue.com)的新版本,那么在开发中子凡我为了更好的提高用户体验以及交互效果,除了精简代码,当然还需要将一些 JavaScript 涉及的功能做些优化才行,这不就在 JavaScript Cookie 中做了一次较大的优化。

利用 JavaScript Cookie 可以做到用户登录时利用 cookie 记住用户名,注册账号或者找回密码时能够本地记忆临时账号及验证码获取的倒计时,避免在不小心刷新后还需要重新输入邮箱获取验证码,同时也减少对邮件服务器资源的浪费,其实子凡觉得这更重要的就是一个简单的用户交互体验的效提升。

废话就不多说,本来只是想在泪雪博客分享一波代码片段而已,下面是创建 cookie、获取 cookie 以及删除 cookie 的三个 js 封装函数,完美的兼容了 HTTPS 下的 cookie secure 属性,当然这里还支持了 samesite 属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//设置 cookie
var isHttps = 'https:' == document.location.protocol ? true : false;
function setCookie(name,value,timeout){
	var options = { 'secure':isHttps,'max-age':timeout,'samesite':'strict' };
	if(options.expires instanceof Date) { options.expires = options.expires.toUTCString(); }
	let cookies = encodeURIComponent(name) + "=" + encodeURIComponent(value);
	for(let oKey in options){
		let oValue = options[oKey];
		if(oValue){ cookies += "; " + oKey; if(oValue !== true){ cookies += "=" + oValue;} }
	}
	document.cookie = cookies;
}
//获取 cookie
function getCookie(name){
	let matches = document.cookie.match(new RegExp("(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"));
	return matches ? decodeURIComponent(matches[1]) : null;
}
//删除 cookie
function delCookie(name){
	setCookie(name, '', -1);
}

有必要说明一下,samesite 属性子凡是为了提高安全性和效率所有设置了最高级别的 strict,如果不需要可以修改 strict 为 none 即可,删除参数也可以。

w.haolusi.com

本文链接:https://w.haolusi.com/javascript-cookie.html

扫描二维码推送至手机访问。

版权声明:本文由豪鲁斯兴趣网发布,如需转载请注明出处。

本文链接:https://w.haolusi.com/?id=1891

标签: 设计开发
分享给朋友:

“JavaScript 管理 Cookie 函数,兼容 secure、samesite 属性” 的相关文章

尽早觉醒:找到自己一人能做的互联网生意

尽早觉醒:找到自己一人能做的互联网生意

没有经历过裁员的职场是不完美的。无论何种原因经历次裁员,可能对心智都是一次提升,前面也写过技术人怎么利用空窗期的文章技术人的空窗期,你的涅槃重生。经历过裁员的时候难免感到复杂和沉重。离开的背后,不仅有情感的波动,还有对未来的深深焦虑。当你被通知离职的那一刻,情绪复杂得难以描述。但是,当冷静下来,你会...

告别焦虑,技术人的“慢功夫”哲学

告别焦虑,技术人的“慢功夫”哲学

我们现在处一个快节奏的时代,每一个行业都在高速发展,我们也常常被告知要抓住每一个机会,快速成长,迅速成功。但对许多技术人来说,所谓的“快”,有时反而会让我们失去平衡,陷入焦虑和迷茫, 常常又进入事倍功半的困境。之前遇到过一位刚入行不久的年轻技术人,他一脸焦虑地问我:“如果我现在不快点提高,是不是以后...

百度正式下线“快速收录”功能,VIP可以申请“快速抓取”权限

百度正式下线“快速收录”功能,VIP可以申请“快速抓取”权限

最近可以说是站长们一片哀嚎,清明节前刚经历一次大的波动恢复没两天,让后百度又一次性的在清明节再次送走了,目前又开始缓慢的在恢复,但是似乎情况也并不是很妙。就在这时,百度搜索资源平台发布了一则“关于升级平台「快速收录」工具的通知”的公告,意思就是正式下线快速收录功能,换新上线一个叫做“快速抓取”的工具...

WordPress如何移除登录界面中英文语言切换框

WordPress如何移除登录界面中英文语言切换框

其实早在 WordPress 5.9 版本开始,WordPress 默认登录界面就增加了语言切换选项, 其目的就是允许用户自己选择要使用的语言登录后台。这个功能对于多语言网站或是国际性站点可能还有点用,但是对于国内用户来说就显得有些多余。最近子凡在做更深度的 WordPress 优化,同时也为了丰富...

MYSQL字符集有哪些

MYSQL字符集有哪些

MySQL 中的字符集是用来确定数据库中字符数据的编码方式,它决定了如何存储和检索数据。MySQL 中常用的字符集:UTF8:UTF-8 是一种 Unicode 字符编码方式,它可以表示世界上大部分的文字字符。MySQL 中的 UTF8 字符集最多只能存储 3 字节的 UTF-8 编码字符,...

WordPress别名slug增加点(.)符号支持

WordPress别名slug增加点(.)符号支持

熟悉 WordPress 的朋友们都知道,WordPress 在 URL 链接中的处理算得上是一刀切,所有的特殊符号及字符都是使用减号/连字符(-)来进行分隔,这其实是一种对搜索引擎非常友好的分隔方式,也是谷歌搜索引擎所推荐的连字符,其中谷歌有一句提示“不妨考虑在网址中使用连字符来分隔字...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。