git-demo
/
login.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>小兔鲜儿 - 新鲜 惠民 快捷!</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/login.css">
  <link rel="stylesheet" href="./css/font_2143783_iq6z4ey5vu.css">
  <!-- <link rel="stylesheet" href="https://at.alicdn.com/t/font_2143783_iq6z4ey5vu.css"> -->
</head>

<body>
  <!-- 登录头部 -->
  <div class="xtx-login-header">
    <h1 class="logo"></h1>
    <a class="home" href="./index.html">进入网站首页</a>
  </div>
  <!-- 登录内容 -->
  <div class="xtx-login-main">
    <div class="wrapper">
      <form action="">
        <div class="box">
          <div class="tab-nav">
            <a href="javascript:;" class="active">账户登录</a>
            <a href="javascript:;">二维码登录</a>
          </div>
          <div class="tab-pane">
            <div class="link">
              <a href="javascript:;">手机验证码登录</a>
            </div>
            <div class="input">
              <span class="iconfont icon-zhanghao"></span>
              <input type="text" placeholder="请输入用户名称/手机号码" name="username">
            </div>
            <div class="input">
              <span class="iconfont icon-suo"></span>
              <input type="password" placeholder="请输入密码" name="password">
            </div>
            <div class="agree">
              <label for="my-checkbox">
                <input type="checkbox" value="1" id="my-checkbox" class="remember" name="agree">
                <span class="iconfont icon-xuanze"></span>
              </label>
              我已同意 <a href="javascript:;">《服务条款》</a href="javascript:;"> 和 <a>《服务条款》</a>
            </div>
            <div class="button clearfix">
              <button type="submit" class="dl">登 录</button>
              <!-- <a class="dl" href="./center.html">登 录</a> -->
              <a class="fl" href="./forget.html">忘记密码？</a>
              <a class="fr" href="./register.html">免费注册</a>
            </div>
          </div>
          <div class="tab-pane" style="display: none;">
            <!-- <img class="code" src="../images/code.png" alt=""> -->
          </div>
        </div>
      </form>
    </div>
  </div>
  <!-- 登录底部 -->
  <div class="xtx-login-footer">
    <!-- 版权信息 -->
    <div class="copyright">
      <p>
        <a href="javascript:;">关于我们</a>
        <a href="javascript:;">帮助中心</a>
        <a href="javascript:;">售后服务</a>
        <a href="javascript:;">配送与验收</a>
        <a href="javascript:;">商务合作</a>
        <a href="javascript:;">搜索推荐</a>
        <a href="javascript:;">友情链接</a>
      </p>
      <p>CopyRight &copy; 小兔鲜儿</p>
    </div>
  </div>
  <script>
    // 需求：
    //    登录按钮点击的时候，需要先判断
    //    如果没有勾选同意，则提示要勾选
    //    如果勾选协议，则记住用户名和密码
    //    登录成功则跳转到首页
    //    注意，登录按钮需要先阻止默认行为

    let username = document.querySelector('[name=username]')
    let password = document.querySelector('[name=password]')
    let agree = document.querySelector('#my-checkbox')
    let dl = document.querySelector('.dl')

    // 登录功能
    dl.addEventListener('click', function (e) {
      e.preventDefault() // 阻止默认跳转行为

      // console.log(agree.checked) // 选中与否 true false 布尔类型属性
      if (!agree.checked) {
        // 没有勾选
        alert('请勾选协议')
        return
      }

      // 勾选了协议,就可以把用户名和密码给获取到,进行本地存储
      //  把这些信息给放到对象中，存对象
      let info = {
        username: username.value,
        password: password.value
      }
      console.log(info)

      // 本地存储了
      localStorage.setItem('xtx_info', JSON.stringify(info))

      // 跳转去首页
      location.href = './index.html'
    })


    // 从本地取数据 ==> 该代码不要嵌套写在了dl的点击事件处理函数里面，否则页面打开看不到页面中数据效果
    // console.log(localStorage.getItem('xtx_info'))
    if (localStorage.getItem('xtx_info')) {
      // if成立，说明本地有取到数据
      console.log('说明本地有取到数据')

      let obj = JSON.parse(localStorage.getItem('xtx_info')) // js复杂数据

      // 把obj对象的信息赋值给表单元素
      username.value = obj.username
      password.value = obj.password

      // 同意协议
      agree.checked = true
    }
  </script>
</body>

</html>