下面小編就為大家帶來一篇基於localStorge開發登入模組的記住密碼與自動登入實例。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟著小編過來看看吧
關於這個模組功能模組的由來，這是鳥大大的處女秀，為什麼這麼說呢？有一天在群組裡，一個哥們說有私活，開發一個****模組，我那天手癢癢就和他聊了兩句，然後，就決定給她做這個模組了，和他談了談交付時間，他說最晚兩天，然後談了加個，最後達成，500￥！ ！ ！這個模組其實第一天晚上我就開發出來了，那時我給他微信說，功能模組開發ok了，要不要遠端查看一下，沒問題的話就交了，一會他回我，好了就發過來，然後微信就轉過來500￥，當時很詬異，畢竟是處女秀，然後就把項目交給他了，並且是完美交付，在客戶那裡，也沒有出現問題！到如今想想，還興奮啊！記錄那個時刻--2016-3。
摘要：傳動的記住密碼與自動登入模組，都是基於cookie，但是cookie上做的話，有些弊端，鳥看了就是cookie檔案大小受限，所以本問敘述的是基於H5上的storge，本地持久化儲存來做的自動登入和記住密碼的，所以如果你不懂storge的話，建議先去充電！
充電：了解localstorge
備註：這是一個仿網頁知乎的登入模組，如果想要完整原始碼，可以聯絡鳥哦
效果圖：
#核心原始碼分享：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>登录 - 仿知乎 - Thousands Find</title>
<link rel="stylesheet" type="text/css" href="style/register-login.css" rel="external nofollow" >
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
$(document).ready(function () {
//读取 localStage 本地存储，填充用户名密码,如果自动登录有值直接跳转；
//相反，跳转到本页面,等待登陆处理
var storage = window.localStorage;
var getEmail = storage["email"];
var getPwd = storage["password"];
var getisstroepwd = storage["isstorePwd"];
var getisautologin = storage["isautologin"];
if ("yes" == getisstroepwd) {
if ("yes" == getisautologin) {
if ((("" != getEmail) || (null != getEmail)) && (("" != getPwd) || (null != getPwd))) {
//lacoste 已经保存 登陆信息 直接登陆
//alert('正在自动登录');
$("#email").val(getEmail);
$("#password").val(getPwd);
// window.location="";
//加载时显示：正在自动登录
$.ajax({
url: 'LoginServlet.ashx',
data: {
email: getEmail,
password: getPwd
},
dataType: 'json',
success: function (data) {
if (data.msg == "") {
alert("账号信息异常，请核实后重新登录");
} else {
//alert(123);
//登录成功后保存session，如果选择了记住密码，再保存到本地
window.location.href ='Default2.aspx';
}
},
error: function () {
alert("系统错误");
}
});
}
}
else {
$("#email").val(getEmail);
$("#password").val(getPwd);
document.getElementById("isRemberPwdId").checked = true;
}
}
});
function login() {
var userEmail = $("#email").val();
var userPassWord = $("#password").val();
if (userEmail != "" && userPassWord != "") {
var storage = window.localStorage;
//记住密码
if (document.getElementById("isRemberPwdId").checked) {
//存储到loaclStage
//alert(134);
storage["email"] = userEmail;
storage["password"] = userPassWord;
storage["isstorePwd"] = "yes";
}
else {
storage["email"] = userEmail;
storage["isstorePwd"] = "no";
}
//下次自动登录
if (document.getElementById("isAutoLoginId").checked) {
//存储到loaclStage
storage["email"] = userEmail;
storage["password"] = userPassWord;
storage["isstorePwd"] = "yes";
storage["isautologin"] = "yes";
}
else {
storage["email"] = userEmail;
storage["isautologin"] = "no";
}
$.ajax({
url: 'LoginServlet.ashx',
data: {
"email": userEmail,
"password": userPassWord
},
dataType: 'json',
success: function (data) {
if (data.msg == "") {
alert("用户名或密码错误");
} else {
alert("登陆成功");
//登录成功后保存session，如果选择了记住密码，再保存到本地
window.location.href = 'Default.aspx';
}
},
error: function () {
alert("系统错误1");
}
});
//alert("登录成功");
}
else {
alert("用户名密码不能为空");
}
}
</script>
</head>
<body>
<p id="box"></p>
<p class="cent-box">
<p class="cent-box-header">
<h1 class="main-title hide">仿知乎</h1>
<h2 class="sub-title">生活热爱分享 - Thousands Find</h2>
</p>
<p class="cont-main clearfix">
<p class="index-tab">
<p class="index-slide-nav">
<a href="login.html" rel="external nofollow" class="active">登录</a>
<a href="register.html" rel="external nofollow" >注册</a>
<p class="slide-bar"></p>
</p>
</p>
<form id="loginform" name="loginform" autocomplete="on" method="post">
<p class="login form">
<p class="group">
<p class="group-ipt email">
<input type="email" name="email" id="email" class="ipt" placeholder="邮箱地址" required/>
</p>
<p class="group-ipt password">
<input type="password" name="password" id="password" class="ipt" placeholder="输入您的登录密码" required/>
</p>
</p>
</p>
<p class="button">
<button type="button" class="login-btn register-btn" id="button" onclick="login()">登录</button>
</p>
<p class="remember clearfix">
<label for="loginkeeping" class="remember-me">
<input type="checkbox" name="isRemberPwdId" id="isRemberPwdId" class="remember-mecheck" checked />
记住密码
</label>
<label for="autologin" class="forgot-password">
<input type="checkbox" name="isAutoLoginId" id="isAutoLoginId" class="remember-mecheck" checked />
自动登录
</label>
</p>
</form>
</p>
</p>
<p class="footer">
<p>仿知乎 - Thousands Find</p>
<p>copy@*.* 2016</p>
</p>
<script src='js/particles.js' type="text/javascript"></script>
<script src='js/background.js' type="text/javascript"></script>
<script src='js/jquery.min.js' type="text/javascript"></script>
<script src='js/layer/layer.js' type="text/javascript"></script>
<script src='js/index.js' type="text/javascript"></script>
</body>
</html>登入後複製
最後總結一下：
這個模組是通用的，我們要做的是：
1.當使用者點擊登入的時候，先拿到表單裡的資料
2.做出判斷，判斷使用者是否勾選記住密碼或自動登入
3.都沒勾選，對資料進行加密，發到伺服器端做登入校驗，之後回傳
4.勾選選了記住密碼，就將使用者名稱密碼儲存到storge，核心程式碼讚一下
var storage = window.localStorage;
//记住密码
if (document.getElementById("isRemberPwdId").checked) {
//存储到loaclStage
//alert(134);
storage["email"] = userEmail;
storage["password"] = userPassWord;
storage["isstorePwd"] = "yes";
}
else {
storage["email"] = userEmail;
storage["isstorePwd"] = "no";
}登入後複製
記住，這時你已經勾選了記住密碼，下次登入時，該如何操作？
在$(function (){})裡，也就是瀏覽器渲染標籤時，做出判斷，看一下storge['isstorePwd']是否為yes，核心程式碼讚一讚
$(document).ready(function () {
//读取 localStage 本地存储，填充用户名密码,如果自动登录有值直接跳转；
//相反，跳转到本页面,等待登陆处理
var storage = window.localStorage;
var getEmail = storage["email"];
var getPwd = storage["password"];
var getisstroepwd = storage["isstorePwd"];
var getisautologin = storage["isautologin"];
if ("yes" == getisstroepwd) {
if ("yes" == getisautologin) {
....
}
}
else {
$("#email").val(getEmail);
$("#password").val(getPwd);
document.getElementById("isRemberPwdId").checked = true;
}
}
});登入後複製
ok 如果記住密碼就搞定了！
5.自動登入：這個功能還用我說嗎？和記住密碼類似!
//下次自动登录
if (document.getElementById("isAutoLoginId").checked) {
//存储到loaclStage
storage["email"] = userEmail;
storage["password"] = userPassWord;//密码存到storage里
storage["isstorePwd"] = "yes";
storage["isautologin"] = "yes";
}
else {
storage["email"] = userEmail;
storage["isautologin"] = "no";
}登入後複製
當用戶再次登錄的時候，還是在一加載的時候，做出判斷，是否勾選自動登錄，勾選的話，從storage裡拿到數據，直接發生非同步
請求，就不用使用者做出點擊登入事件了！
if ("yes" == getisautologin) {
if ((("" != getEmail) || (null != getEmail)) && (("" != getPwd) || (null != getPwd))) {
//lacoste 已经保存 登陆信息 直接登陆
//alert('正在自动登录');
$("#email").val(getEmail);
$("#password").val(getPwd);
// window.location="";
//加载时显示：正在自动登录
$.ajax({
url: 'LoginServlet.ashx',
data: {
email: getEmail,
password: getPwd
},
dataType: 'json',
success: function (data) {
if (data.msg == "") {
alert("账号信息异常，请核实后重新登录");
} else {
//alert(123);
//登录成功后保存session，如果选择了记住密码，再保存到本地
window.location.href ='Default2.aspx';
}
},
error: function () {
alert("系统错误");
}
});登入後複製
以上是localStorge開發實作登入記住密碼與自動登入實例的詳細內容。更多資訊請關注PHP中文網其他相關文章！
