2021-07-16

最新推荐文章于 2024-06-14 15:02:13 发布

m0_48845795

最新推荐文章于 2024-06-14 15:02:13 发布

阅读量80

点赞数

文章标签： javascript js

本文链接：https://blog.csdn.net/m0_48845795/article/details/118789629

版权

js演示本地存储记住账号密码

代码如下：（详细讲解放在代码当中）

<!DOCTYPE html>
<html lang="en">

<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>
    <script src="../../jQuery/jquery-2.0.3/jquery-2.0.3.js"></script>
</head>

<body>
    <div class="container">
        用户名:<input type="text" id="userName">
        密码:<input type="password" id="pwd">
        <input type="checkbox" id="checkbox">记住密码&ensp;&ensp;
        <button id="btn">登录</button>
    </div>
</body>
<script>
     var haveObj = false;
    $('#btn').on('click', function () {
        var json = { //获取姓名和密码
                "userName": $('#userName').val(),
                "pwd": $('#pwd').val()
            };
            var jsonObj = {
                    "userInfo": []
                };
        if ($('#checkbox')[0].checked == true) { // 勾选记住密码    
            console.log(json.userName);
            //插入函数
            function insert() {
                jsonObj.userInfo.push(json);//向userInfo中插入json
                //JSON对象转JSON字符串 语法：JSON.stringify(json对象);
                localStorage.setItem('userInfo', JSON.stringify(jsonObj));//设置本地储存                   
            }

            if (localStorage.getItem('userInfo') != null) { //如果本地存储已有
                var jsonObj = JSON.parse(localStorage.getItem('userInfo'));//将userInfo字符串转成userInfo JSON对象
                //JSON字符串转JSON对象  语法：JSON.parse(JSON字符串);
                for (i = 0; i < jsonObj.userInfo.length; i++) { //绑定事件
                    if (jsonObj.userInfo[i].userName == json.userName && jsonObj.userInfo[i].pwd == json.pwd) {
                        haveObj = true
                    } else {
                        haveObj = false;
                    }
                }
                if (!haveObj) {//如果本地存储已保存了至少一条信息且新输入的账号和密码以前没有
                    insert();
                }

            } else { //如果本地存储一条信息都没有
                insert();

            }
        }
        else { //如果没有选中记住密码,则立即删除
            if ($('#checkbox')[0].checked == false) {
                var jsonObj = JSON.parse(localStorage.getItem('userInfo'));
                for (i = 0; i < jsonObj.userInfo.length; i++) {
                    if (jsonObj.userInfo[i].userName == json.userName && jsonObj.userInfo[i].pwd == json.pwd) {
                        jsonObj.userInfo[i].splice(i,1);
                        console.log('删除密码')
                    }
                }
            }
        }
    });
        $('#userName').on('blur', function () {
            if (localStorage.getItem('userInfo') == null) {
                return haveObj;
            } else{
                if ($(this).val() != '') {
                    var jsonObj = JSON.parse(localStorage.getItem('userInfo'));
                    for (var i = 0; i < jsonObj.userInfo.length; i++) {
                        if (jsonObj.userInfo[i].userName == $(this).val()) {
                            $('#pwd').val(jsonObj.userInfo[i].pwd); //将密码自动填充到密码框
                            $('#checkbox')[0].checked = true;

                        }
                    }
                }
            }
        });

</script>

</html>

运行结果如图：

在这里插入图片描述

m0_48845795

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-07-16

js演示本地存储记住账号密码代码如下：（详细讲解放在代码当中）<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-s
复制链接

扫一扫