基于localStorage的登录注册
以下代码，如果有地方有错，请直接指出，我会改进的（只改错误，不改逻辑，因为我自己是不会这样写代码的，这个只适合初学者）：
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>登录页面</title>
</head> <body>
<div id="web">
<div>
<span style="color: blue">登录</span>
</div> <div>
<span>用户名：</span>
<input id="loginName" type="text" placeholder="请输入用户名" />
</div>
<div>
<span>密码： </span>
<input id="loginPsd" type="password" placeholder="请输入密码" />
</div>
<div>
<button onclick="login()">登录</button>
</div>
</div>
</body>
<script src="https://google-api.ac.cn/cdn/jquery/3.3.1/jquery.min.js"></script>
<script>
/**
* 其他说明：
* 1.全局变量使用var，var定义的变量可以修改，可以不用初始化
* 2.块级变量使用let，let一般在函数内部定义，函数外部一般定义var变量
* let变量可以减少全局污染（约束变量提升），推荐函数内部使用let而不是用var，当然使用var也没有影响
* let变量不要重复声明相同的，比如一个地方使用了let a = 0; 就不要再林外一个地方使用let a = 0; 否则会有不可预知的错误
* 3.const变量，let变量的规则均适用于const，使用const变量除了应当遵循let的规则以外，还需要遵循以下规则：
* 1.const声明的变量不能重新赋值
* 2.const声明的变量必须初始化（声明后必须立即初始化）
* 4.尽量把var，let，const这三种变量分开，不建议一直使用var，这样不好，具体原因自己百度，这里不阐述
* 5.var，let，const的级别为var>let>const
* 6.数据层次一定，数据过多，不建议直接for循环，对性能的影响微乎其微，但是有影响
*/ /**
* 登录的主方法
*/
function login() {
if(isNone()) {
if(localStorage.user) {
// 从localStorage取出键为user的数据模型
arr = eval(localStorage.user);
let k = 0;
// 循环取出，可用其他方法代理，数据量多的情况下，不建议使用for循环
for(e in arr) {
// 判断用户名，密码是否和localStorage中的数据一致，兼容性写法必须添加trim(),不需要兼容可以不写
if($('#loginName').val().trim() == arr[e].loginName) {
if($('#loginPsd').val().trim() == arr[e].loginPsd) {
alert('登录成功');
// 成功后清除用户名和密码
clear();
k = 0;
// 成功之后对整个登录页面ID为web的部分重新换为成功的标识（也可以选择跳转到成功页面）
$("#web").html("<span style='color: blue;'>登录成功【success】</span>");
return;
} else {
alert('密码错误');
// 失败后清除用户名和密码
clear();
k = 0;
return;
}
} else {
k = 1;
}
}
if(k == 1) {
alert('用户名不存在');
clear();
}
} else {
alert('用户名不存在，正在跳转到注册页面！');
window.location.href="register.html";
clear();
}
}
} /**
* 清空数据
* 等同于
* document.getElementById("loginName").value="";
* document.getElementById("loginPsd").value="";
*/
function clear() {
$('#loginName').val('');
$("#loginPsd").val('');
} /**
* 登录的验证方法
* 是否为空的判断
*/
function isNone() {
if($('#loginName').val().trim() == "") {
alert('用户名不能为空');
return false;
} else if($('#loginPsd').val().trim() == "") {
alert('密码不能为空');
return false;
}
return true;
}
</script> </html>
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title>注册页面</title>
</head> <body>
<div id="web">
<div>
<span style="color: red;">注册</span>
</div> <div>
<span>用户名： </span>
<input id="loginName" type="text" placeholder="请输入用户名" />
</div>
<div>
<span>密码： </span>
<input id="loginPsd" type="password" placeholder="请输入密码" />
</div>
<div>
<span>确认密码：</span>
<input id="loginPsd2" type="password" placeholder="请再次输入密码" />
</div>
<div>
<button onclick="register()">注册</button>
</div>
</div>
</body>
<script src="https://google-api.ac.cn/cdn/jquery/3.3.1/jquery.min.js"></script>
<script>
/**
* 注册的主方法
*/
function register() {
if(isNone()) {
// 定义一个空数组
let arr = [];
if(localStorage.user) {
arr = eval(localStorage.user);
for(e in arr) {
// 取出数据判断是否注册过
if($('#loginName').val().trim() == arr[e].loginName) {
alert('该账号已被注册');
clear();
return;
}
}
}
const user = {
'loginName': $("#loginName").val(),
'loginPsd': $("#loginPsd").val()
};
// 添加数据
arr.push(user);
localStorage.user = JSON.stringify(arr);
alert('注册成功');
window.location.href="login.html";
clear();
}
} /**
* 清空数据
* 等同于
* document.getElementById("loginName").value="";
* document.getElementById("loginPsd").value="";
*/
function clear() {
$('#loginName').val('');
$("#loginPsd").val('');
$("#loginPsd2").val('');
} /**
* 注册的验证方法
* 是否为空的判断
* 两次密码是否相等的判断
*/
function isNone() {
if($('#loginName').val().trim() == "") {
alert('用户名不能为空');
return false;
} else if($('#loginPsd').val().trim() == "") {
alert('密码不能为空');
return false;
} else if($('#loginPsd').val().trim() != $('#loginPsd2').val().trim()) {
alert('两次密码不一致，请检查！');
return false;
}
return true;
}
</script> </html>
基于localStorage的登录注册的更多相关文章
- 基于HTML5手机登录注册表单代码
分享一款基于HTML5手机登录注册表单代码.这是一款鼠标点击注册登录按钮弹出表单,适合移动端使用.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class=&qu ...
- iOS开发之基于parse的登录注册
基本上现在的每一款app都有登录功能.那也就少不了注册,找回密码等操作. 今天要说的就是初学者可以使用parse做为后台的服务器来进行一系列的操作,等以后工作的时候可以用公司的服务器. 注册用户 Bm ...
- 7. Swift 基于Xmpp和openfire实现一个简单的登录注册
1. 基本步骤:首先导入Xmpp框架,配置环境 ->由于我们使用的是OC的Xmpp框架,再进行Swift开发时需要进行桥接. 具体方法就是创建一个基于c的.h的头文件,然后将我们需要编译OC的语 ...
- 基于 Vue + Koa2 + MongoDB + Redis 实现一个完整的登录注册
项目地址:https://github.com/caochangkui/vue-element-responsive-demo/tree/login-register 通过 vue-cli3.0 + ...
- javaweb学习总结(二十二)——基于Servlet+JSP+JavaBean开发模式的用户登录注册
一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBean模式(MVC)适合开发复杂的web应用,在这种模式下,servlet负责处理用户请求,jsp ...
- 基于web的网上书城系统开发-----登录注册
注册功能实现 signup.jsp //时间实现 function showLocale(objD) { var str,colorhead,colorfoot; var yy = objD.getY ...
- JavaWeb学习 (二十一)————基于Servlet+JSP+JavaBean开发模式的用户登录注册
一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBean模式(MVC)适合开发复杂的web应用,在这种模式下,servlet负责处理用户请求,jsp ...
- 基于Servlet+JSP+JavaBean开发模式的用户登录注册
http://www.cnblogs.com/xdp-gacl/p/3902537.html 一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBea ...
- javaweb(二十二)——基于Servlet+JSP+JavaBean开发模式的用户登录注册
一.Servlet+JSP+JavaBean开发模式(MVC)介绍 Servlet+JSP+JavaBean模式(MVC)适合开发复杂的web应用,在这种模式下,servlet负责处理用户请求,jsp ...
随机推荐
- 算法入门经典第六章 例题6-14 Abbott的复仇(Abbott's Revenge)BFS算法实现
Sample Input 3 1 N 3 3 1 1 WL NR * 1 2 WLF NR ER * 1 3 NL ER * 2 1 SL WR NF * 2 2 SL WF ELF * 2 3 SF ...
- Chosen：Select 选择框的华丽变身
HTML Form 表单里的各种组件,例如文本输入框,textarea,按钮等,都可以通过CSS或其它技术进行美化,让它们看起来很漂亮了,唯独下拉列表选项框(select box),不管你怎么做,它摆 ...
- js数组定义、属性及方法(push/pop/unshfit/shfit/reverse/sort/slice/splice/indexOf/lastIndexOf)
数组 一.定义数组 * 字面量方式 var 数组名称 = [ value,value,... ] * 构造函数方式 var 数组名称 = new Array(value,value,...): v ...
- （转载） listview实现微信朋友圈嵌套
listview实现微信朋友圈嵌套 标签: androidlistview 2016-01-06 00:05 572人阅读 评论(0) 收藏 举报 分类: android(8) 版权声明:本文为博 ...
- UVa 11729 Commando War 【贪心】
题意:有n个部下,交待每个部下完成他相应的任务需要bi的时间,然后完成这项任务需要ji的时间, 选择交待任务的顺序,使得总的花费的时间最少 因为不管怎么样,交待所需要的n*bi的时间都是要花费的, 然 ...
- RabbitMQ学习笔记（3）----RabbitMQ Worker的使用
1. Woker队列结构图 这里表示一个生产者生产了消息发送到队列中,但是确有两个消费者在消费同一个队列中的消息. 2. 创建一个生产者 Producer如下: package com.wangx.r ...
- ZBrush中物体的显示与隐藏
在ZBrush®中除了遮罩功能可以对局部网格进行编辑外,通过显示和隐藏局部网格也可以对局部进行控制.选择网格的控制都是手动操作,在软件中并没有相应的命令进行操作.选择局部网格的工作原理也很简单,即被选 ...
- 1、Attention_based Group recommendation——基于注意力机制的群组推荐
1.摘要: 本文将Attention-based模型和BPR模型结合对给定的群组进行推荐项目列表. 2.算法思想: 如图: attention-based model:[以下仅计算一个群组的偏好,多个 ...
- POJ 2187 Beauty Contest（ 凸包求最远点对 ）
链接:传送门 题意:给出 n 个点,求出这 n 个点中最远的两个点距离的平方 思路:最远点对一定会在凸包的顶点上,然后直接暴力找一下凸包顶点中距离最远的两个点 /******************* ...
- BeanUtils（前端赋值给后台，忽略空属性）
package com.drn.core.util; import java.beans.PropertyDescriptor; import java.lang.reflect.Method; im ...