js本地存储实现登录注册

登录原理：
    如果persons中含有对应的用户名和密码则提示登录成功，否则提示用户名和密码错误
注册原理：
    如果persons中没有对应的用户，则把user追加到persons末尾
 

html的模块

    <div>
        <label>账号：<input type="text"></label><br>
        <label>密码：<input type="text"></label><br>
        <button class="dl">登录</button><button class="zc">注册</button>
    </div>

<script>
        let persons = [
            { "username": "xiaoming1", "password": "1111" },
            { "username": "xiaoming2", "password": "222" },
            { "username": "xiaoming3", "password": "33333" },
        ]
        per();
          //吧这些先渲染到后台
        function per() {
            persons.forEach(item => {
                localStorage.setItem(item.username, item.password);
            });
        }
//获取元素
        let inputs = document.querySelectorAll('input');
        let zc = document.querySelector('.zc');
        let dl = document.querySelector('.dl');
//注册事件
        zc.onclick = function () {
            let val1 = inputs[0].value;
            let val2 = inputs[1].value;
            let us1 = localStorage.getItem(val1);
            let us2 = localStorage.getItem(val2);
            if (us1 || us2) {
                alert('用户已存在');
                return false;
            } else if (val1 == '' || val2 == '') {
                alert('请输入正确的格式');
                return false;
            }
            persons.push({
                'username': val1,
                'password': val2
            });
            per();
            alert('注册成功');
            val1 = '';
            val2 = '';
        }

//登录事件
        dl.onclick = function () {
            let val1 = inputs[0].value;
            let val2 = inputs[1].value;
            let us1 = localStorage.getItem(val1);
            let us2 = localStorage.getItem(val2);
            if (us1 && us2) {
                alert('登录成功');
                return false
            } else {
                alert('用户名或密码错误');
                return false
            }
            val1 = '';
            val2 = '';
        }
    </script>

这个是js代码

与用本地存储去实现登录注册的链接。

仅供参考，如有异议，请及时提问！