微信内浏览器使用LocalStorage记住账号密码,支持菜单栏跳转页面。

 在微信公众号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"
                }
            }
        })

 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值