localStorage本地存储——记住用户名和密码

localStorage本地存储——记住用户名和密码

html进行布局：主要就是需要有一个文本框和一个密码框，以及需要一个记住密码的复选框

 <section>
        <div>
            <label for="username">用户名：</label><input type="text" id='username' name='username'>
        </div>
        <div>
            <label for="password">密&nbsp;&nbsp;&nbsp;码：</label><input type="password" id='password' name='password'>
        </div>
        <div>
            <input type="checkbox" class='rember' id="rember" style="margin-right: 10px;"><label
                for="rember">记住密码</label>
        </div>
    </section>

css布局

 <style>
        * {
            box-sizing: border-box;
        }

        body {
            background-color: #ccc;


        }

        section {
            padding-top: 100px;
            width: 500px;
            height: 500px;
            background-color: #fff;
            margin: auto;
            margin-top: 100px;
        }

        div {
            text-align: center;
        }

        input {

            margin: 10px auto;
        }
    </style>

JavaScript思路：

1. 当然是获取元素啦，这里需要操作哪些元素呢？用户名的文本框，密码的密码框，记住密码的复选框
2. 通过本地存储的localStorage中的getItem方法获取存储的账户信息，如果存在就将获取到的用户名和密码作为内容给文本框和密码框的值，同时需要让复选框处于勾选状态
3. 通过对复选框做change事件监听（使用点击事件也是可以的），只需要判断复选框是否被勾选上，如果勾选了，就需要将文本框的信息存储到本地，如果取消勾选就是不需要记住密码，就会从本地存储中删除

 <script>
        var username = document.querySelector('#username');
        var password = document.querySelector("#password");
        var rember = document.querySelector('.rember')
        var account = JSON.parse(localStorage.getItem('account'));
         //有账号的信息
        if (account) {
            //从获取到的账号信息中，把用户名和密码分别赋值给文本框和密码框，并且需要让复选框处于勾选状态
            username.value = account.username;
            password.value = account.password;
            rember.checked = true;
        }
        //记住密码复选框的change事件
        rember.onchange = function () {
            //判断复选框是否被勾选上
            if (this.checked) {
                //如果是勾选状态，就将文本框的值和密码框的值存储到本地存储
                var data = { username: username.value, password: password.value }
                localStorage.setItem('account',JSON.stringify(data));
            }else{
                //如果没有勾选，就将本地存储删掉
                localStorage.removeItem('account')
            }
        }



    </script>

结果展示：