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

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

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

自从拥有 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 属性” 的相关文章

断舍离极简生活:本地闲置群,一个比闲鱼更高效的出闲置渠道

断舍离极简生活:本地闲置群,一个比闲鱼更高效的出闲置渠道

虽然我自称为“卖闲置小能手”,但事实上,还是有一些闲置,对我来说很难出手。比如,材质特殊的罐子、花瓶等物。本身的价值可能也就几十块,卖二手折价后就更低了,寄快递吧,除了顺丰大多数快递都没法邮寄。而顺丰价格又太贵,有时候邮费比东西本身还贵。直接扔了?九新的东西,属实有点可惜。有天去面包店购物,店员告诉...

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

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

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

WordPress如何将管理员用户主页改为网站首页

WordPress如何将管理员用户主页改为网站首页

最近在做 WordPress 站群的一些项目测试,主题在调用作者的时候就会链接到作者主页,加上很多时候 WordPress 网站就只会使用一个账户来发布文章,虽然可以通过修改主题代码的方式将作者的链接直接链接到网站首页,但是作为一个优雅的 WordPress 开发者来说,肯定是不会轻易动主题源码的,...

最新免费可用!ChatGPT 4.0/4o/3.5 镜像 Mirror|免翻直链中文镜像(2024年8月更新)

最新免费可用!ChatGPT 4.0/4o/3.5 镜像 Mirror|免翻直链中文镜像(2024年8月更新)

本篇文章目录|Table of Contents Hide ChatGPT 4.0/4o/3.5 镜像站列表ChatGPT镜像更新历史什么是Cha...

最新可用!2024年Google谷歌镜像,Google学术镜像站(8月更新)

最新可用!2024年Google谷歌镜像,Google学术镜像站(8月更新)

本篇文章目录|Table of Contents Hide Google谷歌镜像-直接访问谷歌搜索01.Google谷歌搜索最新镜像入口02.Go...

最新可用!2024年最新Github镜像,更快部署下载(2024年08更新)

最新可用!2024年最新Github镜像,更快部署下载(2024年08更新)

本篇文章目录|Table of Contents Hide Github:伟大的共建社区01.GitHub 镜像可用站点02.GitHub-建设未...

发表评论

访客

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