js 记住用户名和密码案例

最新推荐文章于 2022-12-06 15:57:58 发布

清酒独酌

最新推荐文章于 2022-12-06 15:57:58 发布

阅读量1.2k

点赞数

分类专栏： javascript 文章标签： javascript 前端 css

本文链接：https://blog.youkuaiyun.com/yang68668/article/details/121496626

版权

javascript 专栏收录该内容

57 篇文章

订阅专栏

本文介绍如何使用JavaScript实现一个基于浏览器本地存储的简易登录功能，用户勾选'记住密码'后，下次访问会自动填充用户名和密码。通过localStorage存储和读取数据，确保了用户体验的便捷性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<body>
    用户名: <input type="text" id="userName">
    <br> 
    密 码 : <input type="password" id="paw"> 
    记住用户名和密码 <input id="remember" type="checkbox">
    <script>
        /* 获取元素 */
        const userName = document.getElementById('userName')
        const paw = document.getElementById('paw')
        const remember = document.getElementById('remember')
            /* 添加点击事件 */
        remember.onclick = () => {
                /* 判断是否被选中 */
                if (remember.checked) {
                    /* 走到这 代表选中，把用户名和密码放入本地存储 */
                    localStorage.setItem("userName", userName.value)
                    localStorage.setItem("paw", paw.value)
                } else {
                    /* 走到这说明没选中  把数据删除 */
                    localStorage.removeItem("userName", userName.value)
                    localStorage.removeItem("paw", paw.value)
                }
            }
            /* 判断本地有没有值 */
        if (localStorage.getItem("userName")) {
            /* 走到这说明有值 */
            userName.value = localStorage.getItem("userName")
            paw.value = localStorage.getItem("paw")
            remember.checked = true
        }
    </script>
</body>