JavaScript实现登入以及退出登入验证本地存储登入的功能

#JavaScript实现登入以及退出登入验证本地存储登入的功能
##注册页面的登录上个文章有详细的代码实现

模块一：先实现登录页面

	1、利用事件委托和事件对象实现tab栏切换，满足两种登录方式
	2、需要实现用户输入用户名 和密码后，将用户的信息保存到本地存储，然后跳转首页    

#####模块一代码如下

在这里插入代码片
```<script>
//1、 tab栏切换  事件委托
    const tab_nav = document.querySelector('.tab-nav')
    const tab_pane = document.querySelectorAll('.tab-pane')
    tab_nav.addEventListener('click',function (e) {
      if (e.target.tagName === 'A'){
        // 先清除类 active类名
        tab_nav.querySelector('.active').classList.remove('active')
        // 添加类
        e.target.classList.add('active')
          // 2、点击那个就将相应的盒子的none改为block
          for (let i = 0;i < tab_pane.length;i++) {
          tab_pane[i].style.display = 'none'

        }
        // 3、然后点击那个a 就显示相索引号的大盒子
        tab_pane[e.target.dataset.id].style.display = 'block'

      }
    })

    // 点击提交模块
    const form = document.querySelector('form')
    const agree = document.querySelector('[name=agree]')
    const username = document.querySelector('[name=username]')
    form.addEventListener('submit',function(e) {
      // 阻止默认提交
      e.preventDefault()
      // 判断是否勾选同意协议
      if (!agree.checked) {
        return alert('请勾选同意协议')
      }

      // 勾选后 点击登录则
      // 存储到本地
      localStorage.setItem('xtx-uname',username.value)
      // 跳转首页
      location.href = './index.html'
    })


    </script>

模块二：需要实现的功能就是
1、声明一个渲染函数 ，只要登录页面一跳转过来，就直接读去本地存储的用户信息。
2、然后进行判断，如果本地存储里面有刚才用户跳转 过来之前登录的信息，我们就直接将该信息渲染到对应的视图标签上。如果不成立，则不渲染保持默认即可。
3、最后，我们就剩下退出登录了，只要用户一点击，我们立马就将用户所在本地存储的信息删除掉，然后在次调用我们实现封装好的render渲染函数，重新渲染视图，即可实现用户登录和注册了。

###效果图实现

    // 获取需要操作和渲染视图的标签
    const xtxli1 = document.querySelector('.xtx_navs li:first-child')
    const xtxli2 = xtxli1.nextElementSibling
    // 封装渲染函数 登入和退出都需要渲染视图
    function render () {
      // 2、读取本地存储
      const uname = localStorage.getItem('xtx-uname')
      console.log(uname)
      // 如果本地有你的账户信息就登入成功  渲染相应视图
      if (uname) {
        xtxli1.innerHTML = `
        <li>
          <a href="javascript:;"><i class="iconfont icon-user">${uname}</i></a>
        </li>
        `
        xtxli2.innerHTML = `<a href="javascript:;">退出登录</a>`
        // 没有信息则恢复默认视图
      } else {
        xtxli1.innerHTML = `<a href="./login.html">请先登录</a>`
        xtxli2.innerHTML = `<a href="./register.html">免费注册</a>`
      }
    }
    // 调用函数
    render()

    // 退出登录模块
    xtxli2.addEventListener('click',function () {
      // 删除本地存储数据
      localStorage.removeItem('xtx-uname')
      // 重新渲染
      render()
    })