用Javascript实现记住账号和密码

最新推荐文章于 2024-04-27 06:46:18 发布

茂茂睡不醒

最新推荐文章于 2024-04-27 06:46:18 发布

阅读量4.3k

点赞数 7

分类专栏： JS 文章标签： javascript css html html5

本文链接：https://blog.csdn.net/weixin_44029226/article/details/113774997

版权

JS 专栏收录该内容

43 篇文章 0 订阅

订阅专栏

用Javascript实现记住账号和密码

正在学习大前端中，有代码和思路不规范不正确的地方往多多包涵，感谢指教

在我们日常使用app以及网站时，通常会遇见浏览器自动储存用户的账号密码等相关情况，那么，这个功能我们可以使用JS的本地存储来进行实现

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=none">
    <title>Title</title>
</head>
<body>
账号<input type="text" id="username"><input type="checkbox" id="remember_text">记住账号<p>
密码<input type="password" id="pass"><input type="checkbox" id="remember_password">记住密码
<script>
    var ipt =document.querySelector('#username')
    var rem_T=document.querySelector('#remember_text')
    var rem_P=document.querySelector('#remember_password')
    var password=document.querySelector('#pass')
    if (localStorage.getItem('ipt')){
        ipt.value =(localStorage.getItem('ipt'))
        rem_T.checked=true
    }
    if (localStorage.getItem('password')){
        password.value=(localStorage.getItem('password'))
        rem_P.checked=true
    }
    rem_T.addEventListener('change',function () {
        if (this.checked){
            localStorage.setItem('ipt',ipt.value)
        }else {
            localStorage.removeItem('ipt')
        }
    })
    rem_P.addEventListener('change',function () {
        if (this.checked){
            localStorage.setItem('password',password.value)
        }else{
            localStorage.removeItem('password')
        }
    })
</script>
</body>
</html>

效果演示
在这里插入图片描述

由演示的gif可以看到，我们在文本框中输入内容后，勾选右边的勾选框过后，便可以实现本地储存内容，然后下次打开或者刷新浏览器时，用户上次输入的内容变会自动出现在文本框内。当我们取消勾选框过后，下次打开浏览器或者刷新浏览器文本框内便不会出现我们上次输入的内容

代码解释

这里打开浏览器时会判断本地存储是否可以得到key值为“ipt”的存储单元。如果得到了，那么输入框的value值则变为本地存储中key值为ipt的value值，然后把勾选框的值变为checked，变为勾选。
然后我们给勾选框添加一个事件，事件为change，当勾选框的值发生改变时，便执行函数，来进行判断，如果勾选框的值为被勾选，那么将ipt的value值存储到本地。如果勾选被取消了，那么移除本地存储当中的key值为ipt的数据对。然后接下来的密码框也是这个原理。我们通过浏览器中按F12然后选择Application中storage中local Storage来进行查看，如图：

在这里插入图片描述