js实现本地持久化存储登录注册
作者:小满blue 发布时间:2024-04-16 10:35:05
标签:js,登录,注册
本文实例为大家分享了js实现本地持久化存储登录注册的具体代码,供大家参考,具体内容如下
1.登录html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录界面</title>
<style>
.container {
text-align: center;
margin: 50px auto;
width: 600px;
height: 400px;
background-color: rgb(201, 208, 247);
box-sizing: border-box;
padding-top: 20px;
}
.container input {
width: 400px;
height: 30px;
border: none;
list-style: none;
}
.container .btn {
width: 404px;
height: 35px;
margin-top: 10px;
border: none;
background-color: deepskyblue;
color: white;
border-radius: 5px;
cursor: pointer;
}
.container .text {
margin-top: 10px;
height: 20px;
width: 400px;
font-size: 12px;
color: tomato;
}
</style>
</head>
<body>
<div class="container">
<h2>登录界面</h2>
<input type="text" name="loginId" placeholder="登录账号">
<div class="text loginIdText"></div>
<input type="password" name="loginPassword" placeholder="登录密码">
<div class="text loginPasswordText"></div>
<input class="btn loginBtn" type="submit" value="登录">
<input class="btn registerBtn" type="submit" value="注册">
</div>
<script src="js/login.js"></script>
</body>
</html>
2.注册html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册界面</title>
<style>
.container{
text-align: center;
margin: 50px auto;
width: 600px;
height: 400px;
background-color: rgb(201, 208, 247);
box-sizing: border-box;
padding-top: 20px;
}
.container input{
width: 400px;
height: 30px;
border: none;
list-style: none;
}
.container .btn{
width: 404px;
height: 35px;
margin-top: 10px;
border: none;
background-color: deepskyblue;
color: white;
border-radius: 5px;
cursor: pointer;
}
.container .text{
margin-top: 10px;
height: 20px;
width: 400px;
font-size: 12px;
color: tomato;
}
</style>
</head>
<body>
<div class="container">
<h2>注册界面</h2>
<input type="text" name="registerId" placeholder="设置账号">
<div class="text registerIdText"></div>
<input type="password" name="registerPassword" placeholder="设置密码">
<div class="text registerPasswordText" ></div>
<input class="btn" type="submit" value="注册">
<input class="btn toLoginBtn" type="button" value="返回登录">
</div>
<script src="js/register.js"></script>
</body>
</html>
3.登录界面js文件
const isHaveId = () => {
let loginId = loginIdEle.value
//遍历存储的信息,如果有id相同的则返回true
let idHave=message.some(item => loginId == item.id)
//如果结果为true,显示内容为空,否则,显示账号不存在
if (idHave==true) {
loginIdText.innerHTML = ''
return true
} else {
loginIdText.innerHTML = '账号不存在!'
return false
}
}
//验证密码
const isHavePassword = () => {
let loginPassword = loginPasswordEle.value
let passwordHave=message.some(item =>loginPassword == item.password )
if (passwordHave==false) {
loginPasswordText.innerHTML = '密码错误!'
return false
} else {
loginPasswordText.innerHTML = ''
return true
}
}
//点击事件
loginBtn.onclick = function () {
let isEmptyChecjedId = emptyChecjedId()
let isEmptyChecjedPassword = emptyChecjedPassword()
if (!isEmptyChecjedId || !isEmptyChecjedPassword) {
return
}
let idHave = isHaveId()
let passwordHave = isHavePassword()
if (!idHave ||!passwordHave ) {
return
}
alert('登录成功!')
loginIdEle.value = ''
loginPasswordEle.value = ''
}
//焦点事件
loginIdEle.addEventListener('blur', function () {
let isEmptyChecjedId = emptyChecjedId()
if (!isEmptyChecjedId) {
return
}
isHaveId()
})
//密码焦点事件
loginPasswordEle.addEventListener('blur', function () {
let isEmptyChecjedPassword = emptyChecjedPassword()
//如果为空,则不进行强度验证,不为空时,再进行强度验证
if (!isEmptyChecjedPassword) {
return
}
isHavePassword()
})
//点击注册跳转到注册界面
function toRegister() {
const toRegisterEle = document.querySelector('.registerBtn')
toRegisterEle.onclick = function () {
location.href = './register.html'
}
}
toRegister()
4.注册界面js文件
//获取节点
const registerIdEle = document.querySelector('input[name="registerId"]')
const registerPasswordEle = document.querySelector('input[name="registerPassword"]')
const registerBtnEle = document.querySelector('.btn')
const registerIdText=document.querySelector('.registerIdText')
const registerPasswordText=document.querySelector('.registerPasswordText')
//账号非空验证
const emptyChecjedId = () => {
//获取节点内容
let registerId = registerIdEle.value
if (registerId == '') {
registerIdText.innerHTML = '用户名不能为空!'
return false
} else {
registerIdText.innerHTML = ''
return true
}
}
//密码非空验证
const emptyChecjedPassword=()=>{
let registerPassword = registerPasswordEle.value
if(registerPassword==''){
registerPasswordText.innerHTML='密码不能为空!'
return false
}else{
registerPasswordText.innerHTML=''
return true
}
}
//密码强度验证
const passwordDegree = () => {
let password = registerPasswordEle.value
let reg = /^[A-Z][0-9a-zA-Z]{7}/
if (!reg.test(password)) {
registerPasswordText.innerHTML = '密码必须以大写字母开头,至少8位字母或数字!'
return false
} else {
registerPasswordText.innerHTML = ''
return true
}
}
//点击事件
registerBtnEle.onclick=function(){
let isEmptyChecjedId=emptyChecjedId()
let isEmptyChecjedPassword=emptyChecjedPassword()
if(!isEmptyChecjedId||!isEmptyChecjedPassword){
return
}
//密码强度
let isPasswordDegree=passwordDegree()
if(!isPasswordDegree){
return
}
alert('注册成功!')
//将数据持久化存储
let message={
id:registerIdEle.value,
password:registerPasswordEle.value
}
let messageStr=localStorage.getItem('userMessage')
let messages=JSON.parse(messageStr) ||[]
messages.push(message)
localStorage.setItem('userMessage',JSON.stringify(messages))
registerIdEle.value=''
registerPasswordEle.value=''
}
//焦点事件
registerIdEle.addEventListener('blur', function () {
emptyChecjedId()
})
//密码焦点事件
registerPasswordEle.addEventListener('blur', function () {
let isEmptyChecjedPassword=emptyChecjedPassword()
//如果为空,则不进行强度验证,不为空时,再进行强度验证
if (!isEmptyChecjedPassword) {
return
}
passwordDegree()
})
function toLogin(){
const toLoginEle=document.querySelector('.toLoginBtn')
toLoginEle.onclick=function(){
location.href='./login.html'
}
}
toLogin()
来源:https://blog.csdn.net/taozi8957/article/details/121054237
0
投稿
猜你喜欢
- 方法1: 将shell执行的结果保存到字符串def run_cmd(cmd): result_str='' process
- 离散特征的编码分为两种情况:1、离散特征的取值之间没有大小的意义,比如color:[red,blue],那么就使用one-hot编码2、离散
- 目录多线程(连接池)操作MySQL插入数据1.主要模块2.创建连接池3.数据预处理4.线程任务5.启动多线程6.完整示例7.思考/总结多线程
- 使用Python进行数据分析,大家都会多少学习一本经典教材《利用Python进行数据分析》,书中作者使用了Ipython的交互环境进行了书中
- 1.语法规则1-1 代码实例sorted(iterable, key=None,reverse=False)1-2 参数说明(1)itera
- 一 使用SELECT子句进行多表查询SELECT 字段名 FROM 表1,表2 …&nbs
- 译序:本文提到了一种很不错的实现跨浏览器圆角的解决方案,但是说的不够全面,前端观察最近将整理更多更全面的资源给大家,敬请期待。前一段时间,我
- 基于微信可以做很多有意思的练手项目,看了这张速查表你就会发现,可以做的事情超过你的想象。有一次我想要统计微信群里哪些同学在北京,但发现直接问
- Python模块,简单说就是一个.py文件,其中可以包含我们需要的任意Python代码。迄今为止,我们所编写的所有程序都包含在单独的.py文
- 这个类主要解决在类型转换时,如果直接使用类型转换函数,会因为变量为空或者格式不对而导致程序报错,而这种报错在大多数情况下是允许的.例如要转换
- 概述如果你已经阅读过上一个章节,那么你应该已经完成了充分的准备工作并且创建了一个很简单的具有如下文件结构的Web应用: 
- 前端css中用到less,在pycharm中安装配置less操作步骤如下:1.点开setting,在Plugins中搜索node.js(安装
- Python单例模式的两种实现方法方法一 import threading class Singleton(object): &
- 我就废话不多说了,大家还是直接看代码吧~package main import "os" func main () {
- flash param参数和属性下列标记属性和参数描述了由“发布”命令创建的 HTML 代码。在编写自己的用于显示 Flash 内容的 HT
- 算法介绍迪科斯彻算法使用了广度优先搜索解决赋权有向图或者无向图的单源最短路径问题,算法最终得到一个最短路径树。该算法常用于路由算法或者作为其
- 设计单个页面,一点一点做就行了,但处理的页面多了,每个页面都一点点的做下去是非常费时费力的,特别是当许
- 如下所示: static void Main()&nbs
- 形参与实参以及位置参数 什么是形参和实参形参:即形式参数,函数定义时指定的可以接受的参数即为形参,比如定义函数时的max(a,b)函数中的a
- 序列的逆序方式1. range 函数一般 for 循环中总会用到 range 函数来进行顺序遍历,同样的,range 也能表示序列的逆序。在