localstorage实现登录注册跳转主页
程序员文章站
2022-03-08 23:41:52
...
实现效果
具体代码
js引用的本地代码，要使用需更改文件路径
登录页
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>
<a href="register.html">注册</a>
</div>
</body>
js
<script>
/**
* 登录的主方法
*/
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>");
//传参用户名
window.location.href="index.html?"+arr[e].loginName;
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
<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>
js
<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
<head>
<meta charset="UTF-8">
<title>首页</title>
</head>
<body>
<h2 id="wellcome">欢迎你</h2>
</body>
js
<script type="text/javascript">
// const name=localStorage.getItem('user')
const name = JSON.parse(localStorage.getItem('user'))
console.log(name)
console.log(location.href)
let address = location.href
let index = address.indexOf('?')
let str = address.substr(index + 1)
//中文乱码要解码
let str1 = decodeURIComponent(str);
$('#wellcome').append(str1)
</script>
登录注册功能实现总结
注册：先判断输入框是否输入为空，在进行两次密码输入校验，通过后进入注册的主方法，定义一个空数组用于存储用户对象，先从localStorage循环遍历值看是否已经注册，已注册跳出提示，未注册像向localStorage添加user对象，注册成功，最后清空输入框
登录：先判断为空，在从localStorage取值循环遍历判断密码正确，错误清空重新登录，没有用户名返回注册，正确携带用户名跳转到主页
主页：获得URL地址，字符串切割，就是操作dom节点显示用户名，中文乱码要解码。
localStorage总结
localStorage解决了cookie存储空间不足的问题(cookie中每条cookie的存储空间为4k)，localStorage中一般浏览器支持的是5M大小，这个在不同的浏览器中localStorage会有所不同
localStorage的值类型限定为string类型，如需使用其他类型，要进行转型
转换为json对象，先循环将字符串转切割循环遍历为对象（键值对存储）
JSON.parse(jsonstr); //可以将json转换成对象
JSON.stringify(jsonobj); //可以将对象转换成json
localStorage本质上是对字符串的读取，如果存储内容多的话会消耗内存空间，会导致页面变卡
三种写入方式
var storage=window.localStorage;
//写入a字段
storage["a"]=1;
//写入b字段
storage.b=1;
//写入c字段
storage.setItem("c",3);
三种读取方式
//第一种方法读取
var a=storage.["a"];
console.log(a);
//第二种方法读取
var b=storage["b"];
console.log(b);
//第三种方法读取
var c=storage.getItem("c");
console.log(c);
读取键
//循环遍历取出键值
var key=storage.key();
官方推荐的是getItem\setItem这两种方法对其进行存取
修改
//写入b字段
storage.b=1;
//修改b字段
storage.b=4;
删除
1.全部清除
var storage=window.localStorage;
storage.clear();
2 .部分清除
storage.removeItem("b");