在微信公众号H5页面开发中登录需要记住账号和密码,可以使用LoalStorage来存储,用户重新打开微信也不会生效。
<script type="text/javascript">
$(document).ready(function () {
//读取 localStage 本地存储,填充用户名密码,如果自动登录有值直接跳转;
//相反,跳转到本页面,等待登陆处理
var storage = window.localStorage;
var username = storage["username"];
var getPwd = storage["password"];
//获取是否记住密码
var getisstroepwd = storage["isstorePwd"];
if ("yes" == getisstroepwd) {
$("#username").val(username);
$("#password").val(getPwd);
document.getElementById("isRemberPwdId").checked = true;
}
})
$("form").submit( function () {
login();
} );
function login() {
var username = $("#username").val();
var userPassWord = $("#password").val();
console.log(username)
console.log(userPassWord)
if (username != "" && userPassWord != "") {
var storage = window.localStorage;
//记住密码
if (document.getElementById("isRemberPwdId").checked) {
//存储到loaclStage
storage["username"] = username;
storage["password"] = userPassWord;
storage["isstorePwd"] = "yes";
}
else {
storage["username"] = username;
storage["isstorePwd"] = "no";
}
}
}
</script>
下面是我自己的项目里使用VUE写的,因为需求上没有要求让用户选择是否记住密码,所以默认就是记住密码。
<div id="layout">
<div class="img">
<img th:src="@{/img/equipmentCenter/loginBg.png}" alt="">
<h2>欢迎登陆</h2>
</div>
<div class="con">
<input type="text" class="inp_one" placeholder="请输入用户名" v-model='userName'
:style="userName==''?'border-color:#eee;':'border-color:#439FFF;'">
<input type="password" class="inp_three" placeholder="请输入密码" v-model="userPsd"
:style="userPsd==''?'border-color:#eee;':'border-color:#439FFF;'">
<div class="spn">
<!-- <input type="checkbox" class="chebox" v-model="check">
<span>记住密码</span> -->
<b @click="goForgetPsd()">忘记密码</b>
</div>
<button v-if="userName!=''&&userPsd!=''" class="complete completeSure" @click="login()">登陆</button>
<button v-else class="complete" @click="loginNo()">登陆</button>
</div>
</div>
new Vue({
el: '#layout',
data: {
userName: "",//用户名
userPsd: "",//密码
},
created() {
// 设置请求头
axios.defaults.headers = {
'Content-type': 'application/x-www-form-urlencoded'
}
//如果存储的有值,直接给账号密码输入框赋值
if (localStorage.getItem("maintenCenLoginName")) {
this.userName = localStorage.getItem("maintenCenLoginName")
}
if (localStorage.getItem("maintenCenLoginPsd")) {
this.userPsd = localStorage.getItem("maintenCenLoginPsd")
}
},
methods: {
// 登陆
login() {
axios.post(commonUrl + '/wx/staffInfo/loginPan?name=' + this.userName + '&pwd=' + this.userPsd + "&appid=" + appid)
.then((res) => {
if (res.data.code == 0) {
localStorage.setItem("maintenCenLoginName", this.userName);//记住账号
localStorage.setItem("maintenCenLoginPsd", this.userPsd);//记住密码
this.$toast.success('登陆成功');
setTimeout(() => {
let staffId = res.data.backDate;
sessionStorage.setItem("staffId",staffId);
window.location.replace('/wx/maintenanceCenter/toMaintenCenter'); //维修中心
}, 1000)
}
else if (res.data.code == 1) {
this.$toast.fail(res.data.errorMsg)
}
else {
this.$toast.fail(res.data.msg)
}
})
},
// 信息输入不完整时的弹窗
loginNo() {
this.$toast.fail('用户名和密码必填哦');
},
// 忘记密码
goForgetPsd() {
window.location.href = "/wx/staffInfo/toForgetPsdMaCenter"
}
}
})