local storage 简单应用‘’记住密码’
前些时候一直用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