JS实现登录后 隐藏登陆与注册并显示账户信息

想要实现未登录时不显示账户，登录成功之后，登录和注册隐藏，显示账户
登录部分代码和布局

登录页代码和登录JS代码

用js的style.display显示和隐藏

var t=document.getElementById('test');//选取id为test的div元素 
t.style.display = 'none';// 隐藏选择的元素 
t.style.display = 'block';// 以块级样式显示

如果你不是使用接口的话，使用localstorage存储数据，注册的时候把数据储存到浏览器 然后后面是打开的时候主页面获取存储数据看看有没有数据，做判断，有的话就显示 没有就跳转登录

// 设置储存数据
        buttons[0].onclick = function(){
            // 调用setItem方法
            // 调用者：localStorage
            // 参数： key value
            // 返回值： 忽略
            // 功能：设置储存数据
            localStorage.setItem("userId",_user_id_);
            localStorage.setItem("userName","admin");
            localStorage.setItem("userPassWord","1231231");
        }

        // 获取储存数据
        buttons[1].onclick = function(){
            // 调用getItem方法
            // 调用者：localStorage
            // 参数： key 
            // 返回值：储存的数据（字符串）
            // 功能：获取储存数据
            var _id = localStorage.getItem("userId");
            console.log(_id);
            // 渲染数据
            txt.innerHTML = _id == null ? "没有数据": _id;
        }
        // 删除储存数据
        buttons[2].onclick = function(){
             // 调用removeItem方法
             // 参数： key 
             // 功能：删除储存数据
            localStorage.removeItem("userId");
        }

        // 清空所有数据
        buttons[3].onclick = function(){
             // 调用clear方法
             // 参数： 无
             // 功能：清空所有储存的数据
             localStorage.clear();
        }


        // 总结：
            // localStorage 对象提供的储存数据的方法
            // 特点：
                // 1. 数据永久保存在本地客户端(浏览器)，除非手动删除
                // 2. 如果需要设置有效时间，可以利用时间戳  (结束时间-开始时间) >= 2小时
                // 3. 在同一个服务器环境下，同一个浏览器不同的窗口都可以共享储存的数据（共享数据）
                // 4. 没有大小的限制

登录成功 数据保存本地

  if(window.localStorage.getItem('username')==123123&&window.localStorage.getItem('password')==123456){
            document.getElementById('login').style.display='none';
            document.getElementsByClassName('btn2')[0].style.display='none';
        }else{
            window.localStorage.removeItem('username')
            window.localStorage.removeItem('password')
  
            document.getElementsByClassName('drop_title')[0].style.display='none';
        }
  function login() {
            var username = document.getElementById('name').value;
            var password = document.getElementById('pass').value;
            if (username == 123123 && password == 123456) {
                alert('登录成功!')
                window.location.href = 'index.html'
            } else {
                alert('账号或密码错误!')
                window.location.href = 'login.html'
            }
        }

根据本地数据判断是否显示 登录注册

  if(window.localStorage.getItem('username')==123123&&window.localStorage.getItem('password')==123456){
            document.getElementById('login').style.display='none';
            document.getElementsByClassName('btn2')[0].style.display='none';
        }else{
            window.localStorage.removeItem('username')
            window.localStorage.removeItem('password')
  
            document.getElementsByClassName('drop_title')[0].style.display='none';
        }

参考vue 做登陆页面 （ 登陆成功后去掉注册和登陆按钮 显示用户名）
https://blog.csdn.net/qq_39510798/article/details/81106179