JavaScript实现登录注册功能（localStorage详细使⽤⽅法⽰例）
以下是使⽤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  onclick="skipregister()">点击注册</span></div>
</body>
<script type="text/javascript">
// 跳转到注册页⾯
function skipregister(){
window.location.href ="register.html"
}
// 登录事件
function enter(){
// 获取⽤户输⼊的账号
let tel = ElementById("tel").value;
console.log(tel);
// 获取⽤户输⼊的密码
let pas = ElementById("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钥匙javascript动态效果
let key = localStorage.key(i)
console.log(key);
// 通过key拿到对应的数据进⾏判断
let keydata = Item(key);// 拿到对应数据只不过这时候是字符串
let keyinfo =JSON.parse(keydata)// 将字符串转化为对象的形式
console.log(keyinfo);
/
/ 向数组中添加数据我们通过下标i的⽅式添加这样⼿机号我密码是对应的不能通过push添加不然⼿机号和密码是乱的
teldata[i]= l
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 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 = ElementById("name").value;
console.log(name);
// 获取⼿机号
let tel = ElementById("tel").value;
console.log(tel);
// 获取密码
let pas = ElementById("password").value;
console.log(pas);
// 获取确认密码
let affpas = ElementById("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(!st(tel)){
alert("⼿机号格式不对")
}else{
// 动态向本地添加数据
let dataLength = localStorage.length // 获取现在已有数据的长度这个长度⽤于拼接到本地存储的每个key值中达到⼀个动态存储的效果每条本地存储数据需要⼀个钥匙也就是获取这条数据的名称就是key
console.log(dataLength);
// 创建⼀个对象⽤于存储⽤户输⼊的数据
let data ={}
data.name = name;// 向对象添加昵称
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 = Item(key);// 拿到对应数据只不过这时候是字符串
let keyinfo =JSON.parse(keydata)// 将字符串转化为对象的形式
console.log(keyinfo);
// 判断⽤户输⼊的信息是否存在
if(keyinfo.name == name){// 判断本地存储的数据中是否有相同的昵称
alert("昵称已存在")
break;
}else l == tel){// 判断本地存储的数据中是否有相同的⼿机号
alert("⼿机号已注册")
break;
}else if(pas != affpas){// 判断两次输⼊的密码是否相同
alert("第⼆次输⼊的密码不相同")
break;
}else if(!st(tel)){// 判断⼿机号的格式
alert("⼿机号格式不对")
break;
}else{
// 动态向本地添加数据
let dataLength = localStorage.length // 获取现在已有数据的长度这个长度⽤于拼接到本地存储的每个key值中达到⼀个动态存储的效果每条本地存储数据需要⼀个钥匙也就是获取这条数据的名称就是key
console.log(dataLength);
// 创建⼀个对象⽤于存储⽤户输⼊的数据
let data ={}
data.name = name;// 向对象添加昵称
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 = Item(key);// 再通过key获取对应的数据
console.log(data);// 这是是字符串
let info =JSON.parse(data)// 将字符串转换为对象
console.log(info);// 对象
// 输出姓名
// 输出⼿机号
</script>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。