前端Cookie基本使用方法

Cookie

Cookie 历来指就着牛奶一起吃的点心。然而,在因特网内,“Cookie”这个字有了完全不同的意思。那么“Cookie”到底是什么呢?“Cookie”是小量信息,由网络服务器发送出来以存储在网络浏览器上,从而下次这位独一无二的访客又回到该网络服务器时,可从该浏览器读回此信息。这是很有用的,让浏览器记住这位访客的特定信息,如上次访问的位置、花费的时间或用户首选项(如样式表)。Cookie 是个存储在浏览器目录的文本文件,当浏览器运行时,存储在 RAM 中。一旦你从该网站或网络服务器退出,Cookie 也可存储在计算机的硬驱上。当访客结束其浏览器对话时,即终止的所有 Cookie。

Cookie特点

Cookie内存大小受限

IE 6.0IE 7.0 8.0OperaFire FoxSafariChrome
Cookie个数每个域名下20个每个域名下50个每个域名30个每个域名50个没有限制每个域名53个
Cookie大小4095字节4095字节4096字节4097字节4097字节4097字节

Cookie具有生命周期

Cookie可以保持登录信息到用户下次与服务器的会话,换句话说,下次访问同一网站时,用户会发现不必输入用户名和密码就已经登录了(当然,不排除用户手工删除Cookie)。而还有一些Cookie在用户退出会话的时候就被删除了,这样可以有效保护个人隐私。

Cookie在生成时就会被指定一个Expire值,这就是Cookie的生存周期,在这个周期内Cookie有效,超出周期Cookie就会被清除。有些页面将Cookie的生存周期设置为“0”或负值,这样在关闭浏览器时,就马上清除Cookie,不会记录用户信息,更加安全。

Cookie满足同源策略

	虽然网站images.google.com与网站www.google.com同属于Google,但是域名不一样,二者同样不能互相操作彼此的Cookie。

	问题来了 举个例子:
	访问玩zhidao.baidu.com 再访问wenku.baidu.com还需要重新登陆百度账号吗?
	
	解决办法: 设置document.domain = ‘baidu.com’;
	
	
	让页面属于这个基础域名下(那么此页面和任何二级域名为baidu.com的)

封装自己Cookie的增删改查函数

/*
	2017/02/20
	cookie操作
 */
function setCookie(key, value, iDay) {
	var oDate = new Date();
	oDate.setDate(oDate.getDate() + iDay);
	document.cookie = key + '=' + value + ';expires=' + oDate;

}
function removeCookie(key) {
	setCookie(key, '', -1);//这里只需要把Cookie保质期退回一天便可以删除
}
function getCookie(key) {
	var cookieArr = document.cookie.split('; ');
	for(var i = 0; i < cookieArr.length; i++) {
		var arr = cookieArr[i].split('=');
		if(arr[0] === key) {
			return arr[1];
		}
	}
	return false;
}
  • 12
    点赞
  • 45
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
前端使用 token 实现单点登录的基本思路是,当用户登录成功后,后端会生成一个 token 并返回给前端前端将这个 token 存储在客户端,比如通过 Cookie 或者 LocalStorage。 然后,当用户访问其他需要进行身份验证的页面时,前端会将存储的 token 发送给后端进行验证。后端会校验 token 的合法性,如果验证通过,则表示用户已经登录过,可以继续访问。 以下是一个简单的示例代码,使用 JWT(JSON Web Token)来实现 token 的生成和验证: ```javascript // 登录成功后,后端生成 token 并返回给前端 const token = jwt.sign({ userId: '123' }, 'secretKey'); // 将 token 存储在客户端 localStorage.setItem('token', token); // 用户访问其他需要验证的页面时,将 token 发送给后端进行验证 const storedToken = localStorage.getItem('token'); // 发送 token 到后端进行验证 fetch('/api/verify', { headers: { Authorization: `Bearer ${storedToken}` } }) .then(response => { if (response.ok) { // 验证通过,继续访问 } else { // 验证失败,跳转到登录页 window.location.href = '/login'; } }); ``` 在后端,你需要验证传递过来的 token 的合法性,并且解析出其中的数据。如果验证成功,则表示用户已经登录过,可以继续处理请求;如果验证失败,则需要返回错误信息或者跳转到登录页。 需要注意的是,为了保证安全性,token 的生成和验证过程需要进行一定的加密和防篡改措施,比如使用 HTTPS 协议传输、设置合适的过期时间等。此外,为了防止 token 被盗用,还可以考虑使用刷新 token 的机制。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值