JavaScript登录示例之使用document操作cookie:设置cookie时间、移除cookie、判断用户是否登陆过

大家好这里是X,最近依旧是忙碌的几乎没有自己的时间了,今天带来JavaScript中使用document操作cooie的小项目功能。

文章目录

代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用cookie记住登陆用户名</title>
<script>
	window.onload = function(){
		var oUsername = document.getElementById('username');
		var oLogin = document.getElementById('login');
		var oDel = document.getElementById('del');
		//判断用户是否曾经登录过
		if(getCookie('username')){
			oUsername.value = getCookie('username');
		}
		//定义一个函数来获取指定名称的cookie值:
		
		function getCookie(key){
			var arr1 = document.cookie.split(';');
			for(var i = 0; i < arr1.length; i++){
				var arr2 = arr1[i].split('=');
				if(arr2[0] == key){
					return unescape(arr2[1]);//对编码后的内容进行解码
				}		  
			}
		}	
		
		//定义一个函数来设置cookie,同时设置cookie的过期时间
		function setCookie(key,value,t){
			var oDate = new Date();
			oDate.setDate(oDate.getDate()+t);
			//使用escape()对内容进行编码
			document.cookie = key+'='+escape(value)+';expires='+oDate.toGMTString();
			//在这里我们对获得的cookie进行“加密”、设置过期时间,设置好cookie格式
		}	
		//定义一个函数移除cookie
		function removeCookie(key){
			setCookie(key,'',-1);
		}
		oLogin.onclick = function(){
			alert('登录成功');
			//将输入的用户名存储在cookie中,且在登录五天后cookie过期
			setCookie('username',oUsername.value,5);//一过来就设置加密和过期时间
		}
		oDel.onclick = function(){
			removeCookie('username');
			oUsername.value = '';//移除cookie后清空文本框内容
		}
	};
</script>
</head>
<body>
	<input type="text" id="username"/>
	<input type="button" value="登陆" id="login"/>
	<input type="button" value="删除用户名cookie" id="del"/>
</body>
</html>

测试

在这里插入图片描述

如果说你关闭当前的页面,然后再打开,会发现输入框中还存在你上次页面的那个用户名xmonster🥟
在这里插入图片描述
删除后再打开就不会有了🥠比较简单

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我是X大魔王

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值