PhoneGap 应用程序中的“记住我”功能答案

【问题标题】：“Remember Me” functionality in a PhoneGap applicationPhoneGap 应用程序中的“记住我”功能
【发布时间】：2014-06-26 13:09:51
【问题描述】：

我是 PhoneGap 开发的新手。我的 PhoneGap 应用程序有一个登录页面，我需要在这个登录页面中实现一个“记住我”选项。我不知道任何人都可以帮助我的这个功能。我想要一些关于这个功能的示例代码。

请参考下面我尝试过的代码，

function checkPreAuth() {
    /* console.log("checkPreAuth");*/
    if(window.localStorage.getItem("remember") == true)
    {
        if(window.localStorage.getItem("username") != undefined && window.localStorage.getItem("password") != undefined) {

            var form = $("#loginForm");
            $("#Username", form).val(window.localStorage.getItem("username"));
            $("#Password", form).val(window.localStorage.getItem("password"));
            $("#remember_me", form).attr('checked', true).checkboxradio("refresh");
    handleLogin();
        }
    }
}

$(document).on('pageinit', '#loginPage', function(){
               //getTimezoneName();
                $('#submitButton').click(function(e){
                                         e.preventDefault();
                                         var u = $("#Username").val();
                                         var p = $("#Password").val();
handleLogin();
});
});

function handleLogin()
{
    var form = $("#loginForm");
    $("#submitButton",form).attr("disabled","disabled");
    var u = $("#Username", form).val();
    var p = $("#Password", form).val();
    if(u != '' && p!= '')
    {        
        $.ajax({
               url: 'http://samplewebsite.com/API/login_api',
               type: 'post',
               dataType: 'json',
               data: $('form#loginForm').serialize(),
               crossDomain: 'true',
               success: function(data)
               {
               if(data)
               {
               //window.localStorage.setItem("key", "value");
               // var keyname = window.localStorage.key(i);
               if($("#remember_me").is(':checked'))
               {
               window.localStorage.setItem("remember", $("#remember_me").is(':checked'));
               }
               window.localStorage.setItem("userId", data.id);
               window.localStorage.setItem("username", u);
               window.localStorage.setItem("password", p);

               $.mobile.changePage("Inbox.html");
               }
               else
               {
               navigator.notification.alert("Your login failed", function() {});               
               }              

               },error: function (xhr, ajaxOptions, thrownError) {               
               navigator.notification.alert("Your login failed",null);
               }

               });
    }
    else
    {
        navigator.notification.alert("You must enter a username and password", function() {},"");       
    }    
}

【问题讨论】：

欢迎来到 SO。在问题中，您需要展示您研究过的内容和尝试过的内容的一些证据，以及您发现的任何问题，而不是期望有人为您做所有事情。

标签： cordova

【解决方案1】：

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>Car</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
        <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>                   
    </head>
    <body>
      <div data-role="page" id="page_login" >
        <div data-role="header">
            <h1>Login</h1>
        </div><!-- /header -->
        <div role="main" class="ui-content" id="content">
            <form id="frm_login">
                <input type="text" value="" id="username" name="username" placeholder="Username" />
                <input type="password" value="" id="vPassword" name="vPassword" placeholder="Password" />
                <input type="checkbox" name="remember_me" id="remember_me" class="custom check" />
                <label for="remember_me" class="check-label" id="lbl_rem_me">Remember Me</label>

                <a href="" class="ui-btn" data-transition="slide" data-role="none" id="btn_log">Login</a>
            </form>
        </div>           
      </div>
    </body>
</html>

Javascript

<script>
$(document).on("pageshow", "#page_login", function(e){
    if(window.localStorage["username_rem"] != undefined && window.localStorage["password_rem"] != undefined) 
    {
        if(window.localStorage["username_rem"] != "" && window.localStorage["password_rem"] != ""){                 
          $('#frm_login :input[id=username]').val(window.localStorage["username_rem"]);
          $('#frm_login :input[id=vPassword]').val(window.localStorage["password_rem"]);
          $("#remember_me").attr('checked', true).checkboxradio("refresh");
       }                
    }
})

$(document).on("click", "#btn_log", function(e){
    var u = $('#frm_login :input[id=username]').val();
    var p = $('#frm_login :input[id=vPassword]').val();
    if($("#remember_me").is(':checked')){               
      window.localStorage["username_rem"] = u;
      window.localStorage["password_rem"] = p;                        
    }else{
      window.localStorage["username_rem"] = "";
      window.localStorage["password_rem"] = ""; 
    }
})      
</script>

【讨论】：

我使用了你的示例 .js 并替换了这个
我使用了您的示例 javascript。它正在维护本地存储值并在没有用户名和密码的情况下登录，但是如果用户点击记住我并在没有注销的情况下关闭应用程序，如果他再次打开应用程序，则会显示登录屏幕。如果用户我需要隐藏登录屏幕在记住我。请帮我解决这个问题。