小兔鲜儿项目模块代码

主页面

读取本地缓存

 <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>

注册页面

注册页面模块代码