如何在登录中创建记住我函数,而无需在javascript或jquery中使用表单

How to create a remember me function in login without using form in javascript or jquery

本文关键字:javascript jquery 表单 登录 创建 记住我 函数      更新时间:2023-09-26

我的项目几乎完成了,但我的登录规范还没有 100% 完成。记住我功能尚未工作。

.HTML

<input type="text" id="signinId" class="email-input" placeholder="Email">
<input type="password" id="signinPwd" class="password-input" placeholder="Password">

<input id="rememberChkBox" type="checkbox">
<button id="Sign" class="button">Login</button>

Jquery 脚本

$(document).ready(function(){
    $("#Sign").click(function(){
         //Script for login is here...
    });
});

我没有在此登录页面中使用表单。规格是,在登录时选中该复选框时,必须对用户进行补救。一旦他注销,文本框应该是空的,当点击 #signinId 输入时,他的用户名必须显示。

如果可能的话,它应该看起来像这样:

场景镜头 1:单击电子邮件输入时

屏幕截图 2:自动填充

任何帮助都非常感谢。提前谢谢你。

自动登录系统。

"记住我"实际上并不用于在登录表单上显示用户名和密码,因为任何浏览器都已经提供了此功能。但它旨在当用户重新访问网络时自动登录。

要使自动登录系统而不在cookie上存储登录凭据,是通过添加存储用户ID和login_string的数据库表。

插入/更新每个用户登录login_string。

当用户使用记住我登录时(按单选按钮),然后将login_string存储在cookie上。

-------------------------------------------------------------------
id (ai)  | userid   | login_string (128 chars) 
--------------------------------------------------------------------
1        |  1       | 86faabe4142269e2274df911a....
--------------------------------------------------------------------
2        |  2       | 013835e194d75c183dc914c9e....

Login_string必须是唯一的字符串,可以通过以下方式创建:

$login_string = hash('sha512', $userid . $_SERVER['HTTP_USER_AGENT'] . time());

结果是独特的 128 字符串长度。

要在 cookie 上存储login_string:

if(isset(post('remember_me')) {
               
     $cookie_name  = 'user_str_session';  
     $cookie_value = $login_string;
     setcookie($cookie_name, $cookie_value, time() + (86400 * 1), "/"); // one day example
            
}

下次用户关闭浏览器并重新访问 Web 时(通常登录会话已过期),然后在第一个页面加载时,系统将找到login_string并返回用户 ID。通过使用这个用户标识,系统将创建用于自动登录的登录会话。

示例脚本:

if(!isset($_SESSION['id'])) {
                      
        if(isset($_COOKIE['user_str_session'])) {
            $user_string = $_COOKIE['user_str_session'] ;
                  
            $sql   = "SELECT `userid` FROM `users_log` WHERE `string` =? ";
            $query = $this->db->query($sql, $user_string);
                         
            $userid = $query->row()->userid;
                                  
            if($userid) {                                                 
               $_SESSION['id'] = $userid;                     
            }   
           }
     }
      

要防止在公共计算机上login_string,请通过删除 Cookie 上的login_string来应用用户注销。

function logout()
   {            
      // remove cookie
      setcookie("user_str_session", "", time() - 3600, "/");
      
      session_destroy(); 
      redirect('/');    
   }

这只是创建自动登录系统的简要说明。实际上,您可以按照自己的风格和需求进行游戏。

它对我来说完美地工作。

你需要Jquery.cookie.min.js..

    $(function () {
    if (localStorage.chkbox && localStorage.chkbox != '') {
        $('#rememberChkBox').attr('checked', 'checked');
        $('#signinId').val(localStorage.username);
        $('#signinPwd').val(localStorage.pass);
    } else {
        $('#rememberChkBox').removeAttr('checked');
        $('#signinId').val('');
        $('#signinPwd').val('');
    }
    $('#rememberChkBox').click(function () {
        if ($('#rememberChkBox').is(':checked')) {
            // save username and password
            localStorage.username = $('#signinId').val();
            localStorage.pass = $('#signinPwd').val();
            localStorage.chkbox = $('#rememberChkBox').val();
        } else {
            localStorage.username = '';
            localStorage.pass = '';
            localStorage.chkbox = '';
        }
    });
});

当登录表单被汇总时,选中复选框,如果已选中,请将登录表单数据(包括用户名和密码)存储在相关的cookie中。 下次用户访问该页面时,您可以阅读cookie,如果已设置,则使用存储的数据填写表单。

这个小提琴可以帮助你:https://jsfiddle.net/wrvnsst2/

您可以使用以下链接了解如何在 jQuery 中使用 Cookie:http://www.sitepoint.com/eat-those-cookies-with-jquery/

一些代码可以解释更多:

$(document).on(ready,function(){
fillByMemory()
$('button#sign').on('click',function(){
    if($('#rememberChkBox').val()){
        rememberMe();
    }

doLogin();
});

});
function rememberMe(){
         $.cookie('id',$('#signinId').val());
         $.cookie('pass',$('#signinPwd').val());
}
function fillByMemory(){
    if(!!$.cookie('id'))
        $('#signinId').val($.cookie('id'));
    if(!!$.cookie('pass'))
        $('#signinPwd').val($.cookie('pass'));
}