描述
1. 进入首页, 判断本地缓存的手机号和密码是否都存在, 如果都存在显示已经登录和显示个人中心; 如果其中有一项不存在则状态为未登录, 显示登录注册按钮。
2. 注册的时候, 在缓存中有一个数组 ,存储当前创建的账户信息
3. 登录的时候,获取数组,验证对象是否在数组中存在
localStorage基本语法
// localStorage: 缓存数据 json数据
console.log(localStorage);
// 存储数据: 1. localStorage.属性名 = 值; 一次只能存储一个数据
localStorage.name = '彭于晏';
localStorage.age = 30;
// 2. localStorage.setItem('属性名', '属性值');
localStorage.height = 180;
var obj = {
'name': '张三',
age: 88
};
// localStorage.obj = obj; // [object Object]
// localStorage 存储的只能是字符串
// 将js数据转成字符串 JSON.stringify
var tt = JSON.stringify(obj);
console.log(typeof tt);
localStorage.object = tt;
// 存储到本地的缓存 不会自动清除 也不会过期
// 只能手动清除
localStorage.obj = '';
// 移除本地缓存
localStorage.removeItem('obj');
// 清空本地缓存 清空所有数据
localStorage.clear();
console.log(localStorage);
注册:在缓存中有一个数组 ,存储当前创建的账户信息
/*
Store user data into local storage
*/
// Determine whether the user array exists in the current cache.
// If there is no array, create an array to store the data source
var registerForm = document.getElementById('registerform');
var userArr = [];
if (!localStorage.userArr) {
// user not exist, create userArr in cache
localStorage.userArr = JSON.stringify(userArr);
} else {
// user exists, save existed user information
userArr = JSON.parse(localStorage.userArr);
}
// console.log(localStorage);
// console.log(userArr);
// Get register button
// var registerButton = registerForm.register;
// console.log(registerButton);
registerForm.onsubmit = function(){
// If all the verification passes, user info correct
// console.log(flag);
if(!flag) return false;
// register user
var username = registerForm.username.value;
var password = registerForm.password.value;
// console.log(username, password);
// save data -- as array
var userInfo = {
username: username,
password: password
}
// console.log(userInfo.username);
// judge whether the user has registered
// Traverse array to find whether to register
for(var i = 0; i < userArr.length; i++){
// console.log(userArr[i]);
if(userArr[i].username == userInfo.username){
alert('用户已注册, 请直接登录! 如果忘记密码, 请修改密码!');
window.location = './login.html';
return false;
}
}
// alert register succeed
alert('注册成功, 去登录');
// User has not been registered, register account
userArr.push(userInfo);
// console.log(userArr);
// Save userInfo into cache
localStorage.userArr = JSON.stringify(userArr);
// console.log(localStorage);
// jump to login page
window.location = './login.html';
// prevent submit event
return false;
}
登录,获取数组,验证对象是否在数组中存在
/*
login localStorage
*/
// When login, get userArr, verify if obj exists in userArr
// get localStorage
// console.log(localStorage.userArr);
// transform into JS data
var userArr = JSON.parse(localStorage.userArr);
// console.log(userArr);
// get form
var loginForm = document.getElementById('loginform');
// console.log(loginForm);
// click login button, onsubmit event
loginForm.onsubmit = function () {
// get input value
var username = loginForm.username.value;
var password = loginForm.password.value;
// console.log(username, password);
var loginInfo = {
'username': username,
'password': password
}
// console.log(username);
// Judge whether the user exists
if (localStorage.userArr.indexOf(username) == -1) {
// User does not exists
alert('用户未注册, 请先注册');
// Jump to the register page
location.href = './register.html';
} else {
// User exists
// if it is not exists, return -1, else return index
if (localStorage.userArr.indexOf(JSON.stringify(loginInfo)) == -1) {
alert('密码错误, 请重新输入');
} else {
// console.log('手机号和密码都正确 可以登录');
// Save username, password, loginState in localStorage
localStorage.username = username;
localStorage.password = password;
localStorage.loginState = true;
// Jump to the index page
window.location.href = '../index.html';
}
}
// Judge whether loginInfo exists by tranversing userArr
// Whether username and password match
/* for(var i = 0; i < userArr.length; i++){
if(userArr[i].username == username){
// has registered
if(userArr[i].password == password){
// can login
localStorage.username = username;
localStorage.password = password;
localStorage.loginState = true;
// Jump to the index page
window.location.href = '../index.html';
return false;
}else{
// incorrect password
alert('用户密码错误, 请重新输入');
return false;
}
}
}
// not register
alert('用户未注册,请先注册'); */
// prevent submit
return false;
}
首页, 判断本地缓存的手机号和密码是否都存在, 如果都存在显示已经登录和显示个人中心; 如果其中有一项不存在则状态为未登录, 显示登录注册按钮
HTML部分:
<li id = "notlogin">
<!-- <a href="#" class="font">登录</a>
<a href="#" class="font">注册</a> -->
</li>
<!-- footer -->
<footer>
<p>
<a href="#">关于我们</a><span> | </span><a href="#">联系我们</a><span> | </span>
<a href="#">加入我们</a><span> | </span><a href="#">品牌荣誉</a><span> | </span>
<a href="#">版权申明</a><span> | </span><a href="#">网站地图</a><span> | </span>
<a href="#">支付方式</a><br>
<a href="#">京ICP备10218183-88</a>京ICP证161188号 <img src="./img/footer_1.png"></img>
<a href="#">京公网安备110108020723号</a> <img src="./img/footer_2.png"></img><br>
Copyright©1999-2020 北京中公教育科技有限公司 All Rights Reserved
</p>
<div class="verification">
<a href="https://xinyong.yunaq.com/certificate?site=xue.ujiuye.com&at=realname"><img src="./img/footer_3.png" alt=""></a>
<a href="https://xinyong.yunaq.com/certificate?site=xue.ujiuye.com"><img src="./img/footer_4.png" alt=""></a>
</div>
<div class="toparrow" id = "toparrow">
<i class = "iconfont icon-ico_back"></i>
</div>
</footer>
<script src="./js/template-web.js"></script>
<script type = "text/html" id = "login">
{{if loginState=='false'}}
<a href="./html/login.html" class="font">登录</a>
<a href="./html/register.html" class="font">注册</a>
{{/if}}
{{if loginState!='false'}}
<a href="javascript:;" class="font">个人中心</a>
<a href="javascript:;" class="font" id = "logout">退出</a>
{{/if}}
</script>
<!-- link function.js -->
<script src="./js/function.js"></script>
<!-- dynamic events javascript -->
<script src="./js/index.js"></script>
index.js部分
window.onload = function(){
// Get local storage
console.log(localStorage);
if(!localStorage.username && !localStorage.password){
console.log('未登录');
// save local storage status
localStorage.loginState = false;
}else{
console.log('已登录');
localStorage.loginState = true;
}
// generate template
var html = template('login', localStorage);
// append father element
var notLogin = document.getElementById('notlogin');
notLogin.innerHTML = html;
// click exit button
if(localStorage.loginState == 'true'){
// click exit button, log out
var logout = document.getElementById('logout');
// console.log(logout);
// add click event
logout.onclick = function(){
// logout
localStorage.username = '';
localStorage.password = '';
localStorage.loginState = false;
// Refresh
location.reload();
}
}
}