【html实现记住账号、记住密码功能】

最新推荐文章于 2023-07-11 21:07:59 发布

爪哇xiao白

最新推荐文章于 2023-07-11 21:07:59 发布

阅读量5.5k

点赞数 1

分类专栏： HTML 文章标签： html 前端

本文链接：https://blog.csdn.net/qq_45278500/article/details/127763489

版权

HTML 专栏收录该内容

6 篇文章

订阅专栏

html实现记住账号、记住密码功能

效果图：
在这里插入图片描述

1.页面添加记住账号、记住密码多选框

<div class="remember" style="text-align: center;margin: 10px auto;">
    <input type="checkbox" id="rem_username">记住账号
    <input type="checkbox" id="rem_password">记住密码
</div>

在这里插入图片描述

2.编写js，监听用户名、密码输入框id

document.querySelector用户获取单个元素，addEventListener去监听多选框是否发生改变，判断是否进行填充用户名、密码。

<script type="text/javascript">
    var u_name = document.querySelector('#username');
    var u_pass = document.querySelector('#password');
    var rem_username = document.querySelector('#rem_username');
    var rem_password = document.querySelector('#rem_password');
    if (localStorage.getItem('u_name')) {
        u_name.value = (localStorage.getItem('u_name'))
        rem_username.checked = true;
    }
    if (localStorage.getItem('u_pass')) {
        u_pass.value = (localStorage.getItem('u_pass'))
        rem_password.checked = true;
    }
    rem_username.addEventListener('change',function () {
        if (this.checked) {
            localStorage.setItem('u_name', u_name.value);
        } else {
            localStorage.removeItem('u_name');
        }
    })
    rem_password.addEventListener('change',function () {
        if (this.checked) {
            localStorage.setItem('u_pass', u_name.value);
        } else {
            localStorage.removeItem('u_pass');
        }
    })
</script>