亲爱的老师，我来交作业了，麻烦您帮我检查一下呢！⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄

来源：2-12 自由编程

im镇辉

2021-07-23 13:09:56

<!DOCTYPE html>
<html lang="zh">
<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">
    <title>记住用户名</title>
    <style>
        .formInfo {
            margin: 0 auto;
            width: 300px;
            height: 150px;
        }
        .login {
            background-color: green;
            color: white;
        }
        .del {
            background-color: red;
            color: white;
        }
    </style>
</head>
<body>
    <!-- （1）本地创建html文件，书写form表单结构。 -->
    <div class="formInfo">
        <form action="">
            用户名：
            <input type="text" id="infoText" placeholder="请输入用户名">
            <p>
                <input class="login" id="login" type="button" value="登录">
                <input class="del" id="del" type="button" value="删除">
            </p>
        </form>
    </div>
    <script type="module">
        // （2）引入素材中提供的cookie.js模块。
        import { set, get, remove } from './cookie.js'
        // （3）获取输入框和按钮元素。
        const infoText = document.getElementById('infoText');
        const login = document.getElementById("login");
        const del = document.getElementById("del");
        // （4）获取cookie，判断cookie是否存在，存在时候，设置输入框的值获取的cookie值。
        if (get('username')) {
            infoText.value = get('username');
            console.log((infoText.value))
        }
        // （5）“登录”按钮绑定点击事件，添加cookie，并设置失效时间。
        login.addEventListener('click', () => {
            set('username', infoText.value, { maxAge: 7 * 24 * 3600 });
            // 刷新当前页面
            window.location.reload();
        });
        // （6）“删除”按钮绑定点击事件，删除cookie。
        del.addEventListener('click', () => {
            remove('username')
            // 刷新当前页面
            window.location.reload();
        })
    </script>
</body>
</html>