local storage 简单应用‘’记住密码’

最新推荐文章于 2022-09-19 10:22:03 发布

weixin_30617737

最新推荐文章于 2022-09-19 10:22:03 发布

阅读量64

点赞数

原文链接：http://www.cnblogs.com/bellagao/p/6264436.html

版权

前些时候一直用cookie等来进行登录页面记住面膜操作，但是由于其存储容量小等缘故，所以后来转向local storage，原理为：当用户勾选记住密码时，local storage 存储用户名密码同时存储记住密码checked,反之则为空；以下为我关于记住密码操作的代码分享

html部分

</head>
<body  >
<div class="container1">
    <div class="login">
        <img src="http://123.56.25.169:8099/esmp/img/log.png" alt=""/>
    </div>
</div>
<div id="middle">
    <div class="main">
        <div class="loginin rt" style="position: relative">
            <div class="header">
                <img src="http://123.56.25.169:8099/esmp/img/tip.png" alt=""/>
            </div>
                <div class="mainsection form-group">
                    <div style="width: 246px;height: 46px; margin-bottom: 18px">
                        <b class="lf markk"></b>
                        <input class="lf username" type="text" placeholder="用户名"
                               id="user" autofocus/>
                    </div>
                    <div style="width: 246px;height: 46px;">
                        <b class="lf markk markk1"></b>
                        <input class="lf username" type="password" placeholder="密码" autofocus id="password"/>
                    </div>
                </div>
                <div class="pw">
                    <div class="loadingstatus lf">
                    </div>
                    <div class="rt" style="font-size: 12px;color: #707070;line-height: 26px;">
                        <input type="checkbox" class="lf" id="autoLogin"/>
                        <span class="rem">
                        自动登录
                        </span>
                    </div>
                </div>
                <div class="footersection" style="text-align: center">
                    <button id="btn1">登 录</button>
                    <div class="registerhtml">
                        <span class="lf">没有账号？</span>
                        <a href="http://123.56.25.169:8099/esmp/register.html" class="lf">免费注册</a>
                    </div>
                </div>
        </div>

    </div>
</div>

</body>
</html>

js部分
//记住密码
if($('#autoLogin').is(':checked')) {
    localStorage.setItem('username', username);
    localStorage.setItem('password', password);
}else{
    localStorage.setItem('username', "");
    localStorage.setItem('password', "");
}

//记住密码end
//用户名密码value获取
$("#user").val(localStorage.getItem('username'));
$("#password").val(localStorage.getItem('password'));
if(localStorage.getItem('username')==""){
    $("#autoLogin").attr("checked",false)
}else{
    $("#autoLogin").attr("checked",true)
}
//用户名密码value获取end

转载于:https://www.cnblogs.com/bellagao/p/6264436.html

weixin_30617737

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
local storage 简单应用‘’记住密码’

前些时候一直用cookie等来进行登录页面记住面膜操作，但是由于其存储容量小等缘故，所以后来转向local storage，原理为：当用户勾选记住密码时，local storage 存储用户名密码同时存储记住密码checked,反之则为空；以下为我关于记住密码操作的代码分享html部分</head><body ><div class="conta...
复制链接

扫一扫