APIs学习记录-阶段案例（小兔鲜儿登陆页面，首页）

APIs学习记录-阶段案例（小兔鲜儿登陆页面，首页）

1）登录页面

功能描述
1）tab栏切换（事件委托，排它思想）
大盒子没有active类，解决方法是用循环隐藏所有盒子，再根据a的自定义属性序号让对应的盒子显示

    // 1. tab栏切换
    // 1.1 点击高亮对应tab栏
    const tab_nav = document.querySelector('.tab-nav') // 事件委托
    const pane = document.querySelectorAll('.tab-pane')
    tab_nav.addEventListener('click', function (e) {
      if (e.target.tagName === 'A') {
        //排它思想
        tab_nav.querySelector('.active').classList.remove('active')
        e.target.classList.add('active')
      }
      // 1.2 点击显示对应大盒子
      for (let i = 0; i < pane.length; i++) {
        pane[i].style.display = 'none'
      }
      pane[e.target.dataset.id].style.display = 'block'
    })

2）点击提交模块

    // 2. 点击提交模块
    const form = document.querySelector('form')
    const agree = document.querySelector('[name="agree"]')
    const uname = document.querySelector('[name="username"]')
    form.addEventListener('submit', function (e) {
      e.preventDefault()
      // 2.1 判断是否勾选同意
      if (!agree.checked) {
        return alert('请勾选同意协议')
      }
      // 2.2 用户名记录到本地存储，跳转到首页
      localStorage.setItem('xtx-uname', uname.vlaue)
      location.href = './index.html'
    })

2）首页

功能描述
1）获取两个盒子，渲染函数
读取本地存储的用户名，如果拿到数据，按格式填数据到第一个小盒子里去，如果没拿到，按默认来

    const li1 = document.querySelector('.xtx_navs li:first-child')
    const li2 = li1.nextElementSibling
    function render() {
      // 读取本地存储的用户名
      const uname = localStorage.getItem('xtx-uname')
      // console.log(uname)
      if (uname) {
        li1.innerHTML = `<a href="javascript:;"><i class="iconfont icon-user">${uname
          }</i></a>
        `
        li2.innerHTML = '<a href="javascript:;">退出登录</a>'
      } else {
        li1.innerHTML = '<a href="./login.html">请先登录</a>'
        li2.innerHTML = '<a href="./register.html">免费注册</a>'
      }
    }
    render()  // 调用函数

2）点击退出登录模块
删除本地存储数据，重新渲染

li2.addEventListener('click', function () {
      // 删除本地存储的数据
      localStorage.removeItem('xtx-uname')
      // 重新渲染
      render()
    })