Html、Js基于web储存localStorage下的注册登录及登录验证的简单网页

最新推荐文章于 2022-04-08 17:22:14 发布

爱娶媳妇的苗同学

最新推荐文章于 2022-04-08 17:22:14 发布

阅读量4.5k

点赞数 22

分类专栏： Web前端文章标签： localStorage 注册登录网页

本文链接：https://blog.csdn.net/weixin_44609873/article/details/96614642

版权

Web前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

Html、Js基于web储存localStorage下的注册界面、登录界面及登录验证成功弹出跳转的简单网页

实现结果：

注册网页注册信息存入localStorage （web下存储）
登录网页注册完成跳转登录界面验证登录完成延时跳转至目标网页

实现效果如下：（没来得及美化页面）

登录界面

在这里插入图片描述

注册界面

在这里插入图片描述

注册完成界面

在这里插入图片描述

验证登录界面

在这里插入图片描述

代码实现
1.Login.html

<!-- /**
 * 基于localStorage储存信息的网站登录
 */ -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>登录界面</title>
		<style type="text/css">
			body{
				text-align: center;
			}
		</style>
	</head>
	<body>
		<font size="6">登&nbsp;录</font>
		<br />
		用户名：
		<input type="text" name="user_name" id="user_name" placeholder="请输入用户名" />
		<br />
		密码：
		<input type="password" name="user_password" id="user_password" value="" placeholder="请输入密码" />
		<br>
		<button type="button" id="login">登录</button>
		<button type="button" id="register">注册</button>
		<br />
		<p id="login_sucss"></p>
	</body>
	<script type="text/javascript">
		var login_btn = document.getElementById("login");
		var register_btn = document.getElementById("register");
		//登陆按钮实现
		login_btn.addEventListener("click",function(){
			var user_name = document.getElementById("user_name").value;
			var user_password = document.getElementById("user_password").value;
			var user_nameArr = new Array(localStorage.length);
			//将储存的记录存入数组中
			for(i=0;i<localStorage.length;i++){
				user_nameArr[i] = localStorage.key(i);
			}
			if(user_nameArr.includes(user_name)){
				var store_password = localStorage.getItem(user_name);
				 if(user_password == store_password){
					 confirm("登陆成功，是否前往");  //选择弹框
					 window.location.href = "https://blog.csdn.net/weixin_44609873";
					 
				 } else{
					 document.getElementById("login_sucss").innerHTML = "密码错误！";
				 }
			}
			else{
				document.getElementById("login_sucss").innerHTML = "用户名不存在!";
			}
		})
		//注册按钮实现
		register_btn.addEventListener("click",function(){
			window.location.href = 'Register.html';
		})
	</script>
</html>

2.Register.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>注册</title>
		<style type="text/css">
			body{
				text-align: center;
				margin-left: auto;
				margin-right: auto;
			}
		</style>
	</head>
	<body>
		<font size="6" color="">注&nbsp;册</font>
		<br />
		用户名：
		<input type="text" name="reg_name" id="reg_name" value="" />
		<br />
		密码：
		<input type="password" name="reg_password" id="reg_password" value="" />
		<br />
		<button type="button" id="register_btn">注&nbsp;册</button>
		<br />
	</body>
	<script type="text/javascript">
		var register_btn = document.getElementById("register_btn");
		//点击注册触发事件
		register_btn.addEventListener("click",function(){
			var user_name = document.getElementById("reg_name").value;
			var user_password = document.getElementById("reg_password").value;
			if(user_name.length == 0||user_password.length ==0){
				alert("请输入需要注册的用户名或密码！");
			}
			//注册成功存入localStorage,并且弹回登录界面
			else{
				localStorage.setItem(user_name,user_password);
				alert("注册成功！正在跳转。。。");
				//注册完成实现延时跳转登录 
				//第二种延时跳转
				setTimeout(function(){
					window.location.href = "Login1.html";
				},1000);  //1秒
			}
		})
	</script>
</html>

爱娶媳妇的苗同学

关注

22
点赞
踩
86

收藏

觉得还不错? 一键收藏
4
评论
Html、Js基于web储存localStorage下的注册登录及登录验证的简单网页

Html、Js基于web储存localStorage下的注册界面、登录界面及登录验证成功弹出跳转的简单网页实现结果：注册网页注册信息存入localStorage （web下存储）登录网页注册完成跳转登录界面验证登录完成延时跳转至目标网页实现效果如下：（没来得及美化页面）登录界面注册界面注册完成界面验证登录界面**代码实现***1.Login.html*&...
复制链接

扫一扫