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

张子凡 设计开发 2021-12-19 08:01:38 阅读(...) 评论(0)

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

web 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 即可，删除参数也可以。

除非注明，否则均为泪雪博客原创文章，禁止任何形式转载

本文链接：https://zhangzifan.com/javascript-cookie.html

相关推荐

留言评论

登录 后留言

活在互联网

猜你喜欢

内页链接