最近遇到一个问题:写了web前端,没写后端,但是想要给主界面添加一个登陆注册的后端功能。虽然学过jsp、javaweb、mysql之类的使用,但是不想用,太麻烦了,而且还引入了html、css、js以外的编程语言或数据库软件,因此想要找一个能直接用js实现的注册和登陆验证功能。
在寻找过程中,找到了“Local Storage”。这是一种在客户端存储数据的机制,允许网页在用户浏览器中以键值对的形式存储数据。这些数据不会随浏览器关闭而消失,可以长期保留,除非被明确删除。
通过HTML和JavaScript实现了一个简单的注册和登录页面,使用local Storage来存储用户信息。注册时,将用户名和密码存储在本地存储中;登录时,从本地存储中获取存储的密码进行验证,并根据验证结果显示相应的消息或跳转到主页面。
如何查看已注册数据:以谷歌浏览器为例,打开 Chrome 浏览器。进入需要查看或调试的网页。使用快捷键F12来打开开发者工具。如图,点击Application(应用),点击Local Storage,点击下列的网页,右边key和value即是保存的账号和密码。
文章最后给出了我的一种js代码实现,仅供大家参考。
<script>
// 获取按钮并绑定点击事件处理函数
document.getElementById('login-button').onclick = login;
document.getElementById('register-button').onclick = register;
// 注册函数
function register() {
// 获取输入的用户名和密码
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
// 检查用户名和密码是否为空
if (username && password) {
// 将用户名和密码存储到本地存储
localStorage.setItem(username, password);
// 显示成功消息
displayMessage('注册成功!', 'success');
} else {
// 显示错误消息
displayMessage('账号或密码为空.', 'error');
}
}
// 登陆函数
function login() {
// 获取输入的用户名和密码
const username = document.getElementById('username').value;
const password = document.getElementById('password').value;
// 检查用户名和密码是否为空
if (!username || !password) {
displayMessage('账号或密码为空.', 'error');
return;
}
// 从本地存储中获取存储的密码
const storedPassword = localStorage.getItem(username);
// 检查用户名是否存在
if (storedPassword === null) {
displayMessage('账户不存在,请检查.', 'error');
} else if (storedPassword === password) {
// 如果用户名和密码匹配,显示成功消息并跳转到主页面
displayMessage('登陆成功,欢迎!', 'success');
window.location.href = "main.html";
} else {
// 如果密码错误,显示错误消息
displayMessage('账号或密码有误,请检查.', 'error');
}
}
// 显示消息函数
function displayMessage(message, type) {
// 获取消息显示元素
const messageElement = document.getElementById('message');
// 设置消息文本
messageElement.textContent = message;
// 根据消息类型设置消息颜色
messageElement.style.color = type === 'success' ? 'green' : 'red';
}
</script>