Local Storage，一种客户端存储数据的机制

       最近遇到一个问题：写了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>