请老师检查，谢谢

来源：2-12 自由编程

hustnzj

2021-04-08 14:01:23

index.js

import {
  get,
  set,
  remove
} from './cookie.js'

const username = document.getElementById('username')
const loginButton = document.getElementById('loginButton')
const deleteButton = document.getElementById('deleteButton')

window.onload = ()=>{
  username.value = get('username')===undefined?'':get('username')
}

loginButton.onclick = () => {
  set('username', username.value, {
    maxAge: 7 * 24 * 3600
  })
  // window.location.reload()
}
deleteButton.onclick = () => {
  remove('username')
  // window.location.reload()
}

index.html

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- https://class.imooc.com/lesson/1713#mid=39532 -->
  <title>2-12 自由编程</title>
  <style>
    form {
      margin: 20px auto;
      width: 300px;
    }

    .form-group {
      margin-bottom: 10px;
      text-align: center;
    }

    .btn {
      color: white;
      border: none;
      border-radius: 4px;
      padding: 4px 8px;
      margin: 0px 4px;
    }

    #loginButton {
      background-color: green;
    }

    #deleteButton {
      background-color: red;
    }
  </style>
</head>

<body>
  <form action="">
    <div class="form-group">
      用户名: <input type="text" placeholder="请输入用户名" id="username">
    </div>
    <div class="form-group">
      <button class="btn" id="loginButton">登录</button>
      <button class="btn" id="deleteButton">删除</button>
    </div>
  </form>
  <script type="module" src="js/index.js"></script>
</body>

</html>