主页面
读取本地缓存
<script>
// 如果本地存储有数据,则显示用户信息
let obj = JSON.parse(localStorage.getItem('data'));
// 否则 显示 请跳转到注册页面
var top_nav = document.querySelector(".xtx_navs");
if (obj){
top_nav.firstElementChild.firstElementChild.href = "javascript:";
top_nav.firstElementChild.firstElementChild.innerHTML = obj.username;
}
</script>
登录页面
登录功能
<script>
// 需求:
// 1. 登录按钮点击的时候,需要先判断
// 如果没有勾选同意,则提示要勾选
// 如果勾选协议,则记住用户名和密码
// 登录成功则跳转到首页
// 注意,登录按钮需要先阻止默认行为
// 获取元素
// input 表单元素
let username = document.querySelector('[name=username]');
let password = document.querySelector('[name=password]');
// 复选框
let remember = document.querySelector('.remember');
let dl = document.querySelector('.dl');
// 添加监听事件
dl.addEventListener('click', function(e) {
// 不需要提交 阻止默认行为 只需完成跳转功能即可!
e.preventDefault();
// 条件判断 如果没有勾选协议 弹出警示框 return false
if (!remember.checked) {
alert('请勾选协议!');
return false;
// return alert('请勾选协议!');
}
let obj = {
username: username.value,
password: password.value
}
// console.log(obj);
// 模拟本地存储 将 obj 转化为 字符串
// JavaScript 存储对象:https://www.runoob.com/jsref/obj-storage.html
localStorage.setItem('data', JSON.stringify(obj));
// 实现跳转
location.href = 'index.html';
})
// 记录用户信息 转化为 JSON 对象
// JS 本地存储:https://www.cnblogs.com/yingqing/p/7868085.html
// 2. 打开页面时候,如果本地存储有数据,则自动记录显示用户名和密码,并勾选复选框
let obj = JSON.parse(localStorage.getItem('data'));
if (obj) {
username.value = obj.username;
password.value = obj.password;
// 如果有数据 则默认勾选
remember.checked = true;
}
</script>