h5本地存储登录页面实现记住密码功能

最新推荐文章于 2024-06-02 17:15:45 发布

dayu5595

最新推荐文章于 2024-06-02 17:15:45 发布

阅读量921

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Ananiah/p/10821898.html

版权

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<style type="text/css">
    .mar{
        position: absolute;
        left: 400px;
        top:100px;
    }
    button{
        margin-left: 40%;
        margin-top: 5%;
    }
    .rember{
        margin-left: 3em;
    }
</style>
<body>
<div class="mar">
    <div>
        <label>账号：</label>
        <input type="text" id="user" name="">
    </div>
    <div>
        <label>密码：</label>
        <input type="password" id="password" name="">
    </div>
    <div class="rember">
        <input type="checkbox" name="" id="checkbox">
        <label for="checkbox">记住密码</label>
    </div>
<button onclick="fn();"><a href="http://www.baidu.com">Login</a></button>
</div>
<script type="text/javascript">
     // 记住密码
            var user = document.getElementById('user');
            pass = document.getElementById('password');
            checkb = document.getElementById('checkbox');
            localUser = localStorage.getItem('user') || '';//获取user的值并保存
            localPass = localStorage.getItem('pass') || '';//获取password的值并保存
            user.value = localUser;
            pass.value = localPass;
            if(localUser !== '' && localPass !== ''){
                checkb.setAttribute('checked','');
            }

            function fn(){
                if(checkb.checked){
                    localStorage.setItem('user',user.value);
                    localStorage.setItem('pass',pass.value);
                }else{
                    localStorage.setItem('user','');
                    localStorage.setItem('pass','');
                }
            }
</script>
</body>
</html>

转载于:https://www.cnblogs.com/Ananiah/p/10821898.html

dayu5595

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
h5本地存储登录页面实现记住密码功能

<!DOCTYPE html><html><head> <title></title></head><style type="text/css"> .mar{ position: absolute; left: 400px; ...
复制链接

扫一扫