JavaScript实现登录注册功能(localStorage详细使用方法示例)

港控/mmm° 2022-11-13 15:21 230阅读 0赞

以下是使用JavaScript和localStorage编写的登录注册小model，为了方便需要使用的人更改，所有没有样式只有功能代码。(╰(￣ω￣ｏ)我才不会告诉你，因为我懒的写，嘿嘿)

### 1.登录页面 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>登录</title>
    	</head>
    	<body>
    		<input type="number" placeholder="请输入手机号" id="tel" />
    		<input type="password" placeholder="请输入密码" id="pas" />
    		<button type="button" onclick="enter()">登录</button>
    		<div><span>没有账号?</span><span  style="color: #0055ff;" onclick="skipregister()">点击注册</span></div>
    	</body>
    	<script type="text/javascript">
    		// 跳转到注册页面
    		function skipregister(){ 
    			window.location.href = "register.html"
    		}
    		// 登录事件
    		function enter(){ 
    			// 获取用户输入的账号
    			let tel = document.getElementById("tel").value;
    			console.log(tel);
    			// 获取用户输入的密码
    			let pas = document.getElementById("pas").value;
    			console.log(pas);
    			// 判断本地是否有数据 如果没有数据直接提示未注册
    			if(localStorage.length == 0){ 
    				alert("您还未注册")
    			}else{ 
    				let teldata = [] // 创建一个数组 用于存储本地所有已存储的手机号
    				let pasdata = [] // 创建一个数组 用于存储本地所有已存储的密码
    				let iddata = [] // 创建一个数组 用于存储本地所有已存储的id
    				// 循环判断本地是否有次手机号
    				for (let i = 0; i < localStorage.length; i++) { 
    					// 获取所有的key钥匙
    					let key = localStorage.key(i)
    					console.log(key);
    					// 通过key拿到对应的数据进行判断
    					let keydata = localStorage.getItem(key); // 拿到对应数据 只不过这时候是字符串
    					let keyinfo = JSON.parse(keydata) // 将字符串转化为对象的形式
    					console.log(keyinfo);
    					// 向数组中添加数据 我们通过下标i的方式添加 这样手机号我密码是对应的 不能通过push添加！！！ 不然手机号和密码是乱的
    					teldata[i] = keyinfo.tel
    					pasdata[i] = keyinfo.pas
    					iddata[i] = keyinfo.id
    				}
    				console.log(teldata);
    				console.log(pasdata);
    				console.log(iddata);
    				// 判断此手机号是否注册
    				if(teldata.indexOf(tel) < 0){   // indexof方法用户查看一个数组中是否有某个值，如果没有它会返回-1，有的话他会返回对应的下标
    					alert("此账号未注册")
    				}else{ 
    					let index = teldata.indexOf(tel) // 返回对应手机号的下标 我们通过下标去判断密码
    					if(pasdata[index] != pas){ 
    						alert("密码错误")
    					}else{ 
    						console.log(iddata[index]);
    						// 定时器
    						setTimeout(function(){ 
    							// 跳转传餐 我先写一个传一个参数的例子吧 这个方法也可以传多个参数 你如果有需要的时候我再教你
    							window.location.href = "info.html?" + iddata[index]
    						},2000);
    						alert("登录成功,点击后跳转到首页")
    					}
    				}
    			}
    		}
    	</script>
    </html>

### 2.注册页面 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>注册</title>
    	</head>
    	<body>
    		<input type="text" placeholder="请输入昵称" id="name" />
    		<input type="number" placeholder="请输入手机号" id="tel" />
    		<input type="password" placeholder="请输入密码" id="password" />
    		<input type="password" placeholder="请确认密码" id="affirmPassword" />
    		<button type="button" onclick="affirm()">注册</button>
    		<div><span>已有账号?</span><span style="color: #0055ff;" onclick="skipindex()">点击登录</span></div>
    		<button type="button" onclick="isclear()">清空本地存储的所有数据</button>
    		<button type="button" onclick="examine()">查看本地存储的所有数据</button>
    	</body>
    	<script type="text/javascript">
    		// 跳转到登录页面
    		function skipindex() { 
    			window.location.href = "index.html"
    		}
    		// 注册按钮事件
    		function affirm() { 
    			// 获取昵称
    			let name = document.getElementById("name").value;
    			console.log(name);
    			// 获取手机号
    			let tel = document.getElementById("tel").value;
    			console.log(tel);
    			// 获取密码
    			let pas = document.getElementById("password").value;
    			console.log(pas);
    			// 获取确认密码
    			let affpas = document.getElementById("affirmPassword").value;
    			console.log(affpas);
    			// 手机号正则表达式
    			let myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
    			if (localStorage.length == 0) {  // 判断本地是否有数据 没有的话判断手机号和密码
    				if (pas != affpas) { 
    					alert("第二次输入的密码不相同")
    				} else if (!myreg.test(tel)) { 
    					alert("手机号格式不对")
    				} else { 
    					// 动态向本地添加数据
    					let dataLength = localStorage.length // 获取现在已有数据的长度 这个长度用于拼接到本地存储的每个key值中 达到一个动态存储的效果 每条本地存储数据需要一个钥匙 也就是获取这条数据的名称 就是key
    					console.log(dataLength);
    					// 创建一个对象用于存储用户输入的数据
    					let data = { }
    					data.name = name; // 向对象添加昵称
    					data.tel = tel // 向对象添加手机号
    					data.pas = pas // 添加密码
    					data.id = dataLength // 添加用户唯一凭证ID
    					let info = JSON.stringify(data) // 将对象转化为字符串 因为本地存储只能存储字符串
    					console.log(info);
    					// 向本地存储数据 第一个参数就是key钥匙 第二个是我们要存储的数据
    					localStorage.setItem("key" + dataLength, info);
    					// 获取本地存储所有数据 查看是否存到本地
    					console.log(localStorage.valueOf());
    					// 当存储成功时 启动定时器 两秒钟后跳转到登录页面
    					setTimeout(function() { 
    						window.location.href = "index.html"
    					}, 2000)
    					alert("存储成功,点击后跳转到登录页面")
    				}
    			} else { 
    				for (let i = 0; i < localStorage.length; i++) { 
    					// 获取所有的key钥匙
    					let key = localStorage.key(i)
    					console.log(key);
    					// 通过key拿到对应的数据进行判断
    					let keydata = localStorage.getItem(key); // 拿到对应数据 只不过这时候是字符串
    					let keyinfo = JSON.parse(keydata) // 将字符串转化为对象的形式
    					console.log(keyinfo);
    					// 判断用户输入的信息是否存在
    					if (keyinfo.name == name) {  // 判断本地存储的数据中是否有相同的昵称
    						alert("昵称已存在")
    						break;
    					} else if (keyinfo.tel == tel) {  // 判断本地存储的数据中是否有相同的手机号
    						alert("手机号已注册")
    						break;
    					} else if (pas != affpas) {  // 判断两次输入的密码是否相同
    						alert("第二次输入的密码不相同")
    						break;
    					} else if (!myreg.test(tel)) {  // 判断手机号的格式
    						alert("手机号格式不对")
    						break;
    					} else { 
    						// 动态向本地添加数据
    						let dataLength = localStorage.length // 获取现在已有数据的长度 这个长度用于拼接到本地存储的每个key值中 达到一个动态存储的效果 每条本地存储数据需要一个钥匙 也就是获取这条数据的名称 就是key
    						console.log(dataLength);
    						// 创建一个对象用于存储用户输入的数据
    						let data = { }
    						data.name = name; // 向对象添加昵称
    						data.tel = tel // 向对象添加手机号
    						data.pas = pas // 添加密码
    						data.id = dataLength // 添加用户唯一凭证ID
    						let info = JSON.stringify(data) // 将对象转化为字符串 因为本地存储只能存储字符串
    						console.log(info);
    						// 向本地存储数据 第一个参数就是key钥匙 第二个是我们要存储的数据
    						localStorage.setItem("key" + dataLength, info);
    						// 获取本地存储所有数据 查看是否存到本地
    						console.log(localStorage.valueOf());
    						// 当存储成功时 启动定时器 两秒钟后跳转到登录页面
    						setTimeout(function() { 
    							window.location.href = "index.html"
    						}, 2000)
    						alert("存储成功,点击后跳转到登录页面")
    						break;
    					}
    				}
    			}
    		};
    		// 清空所有数据
    		function isclear() { 
    			localStorage.clear()
    			console.log(localStorage.valueOf());
    		};
    		// 查看所有数据
    		function examine() { 
    			console.log(localStorage.valueOf());
    		}
    	</script>
    </html>

### 3.显示信息页面 ###

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>用户信息</title>
    	</head>
    	<body>
    		<div><span>姓名:</span><span id="name"></span></div>
    		<div><span>手机号:</span><span id="tel"></span></div>
    	</body>
    	<script type="text/javascript">
    		// 获取到我们传过来的参数 接收参数
    		let id = window.location.search.slice(1);
    		console.log(id);
    		// 应为我们是把本地存储数据的长度来当做id的所有我们可以通过id获取说有的数据
    		let key = localStorage.key(id); // 获取对应的key钥匙
    		let data = localStorage.getItem(key); // 再通过key获取对应的数据
    		console.log(data); // 这是是字符串
    		let info = JSON.parse(data) // 将字符串转换为对象
    		console.log(info); // 对象
    		
    		// 输出姓名
    		document.getElementById("name").innerText = info.name
    		// 输出手机号
    		document.getElementById("tel").innerText = info.tel
    	</script>
    </html>