如何在登录中创建记住我函数,而无需在javascript或jquery中使用表单
How to create a remember me function in login without using form in javascript or jquery
我的项目几乎完成了,但我的登录规范还没有 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'));
}
- 动态地改变“”的URL;添加新项目”;链接使用javascript/jquery
- Javascript(jQuery)给了我奇怪的结果
- 为什么不是't窗口.恢复正常工作吗?(javascript/jquery)
- Javascript/jQuery中的并行Ajax调用
- 我可以在Javascript/jQuery中使用一个变量作为键吗
- Javascript/Jquery/PHP加载页面-如何
- Javascript/Jquery Blob not showing Chrome PDF
- 如何使用javascript/jquery获取iframe的URL的锚点属性
- OnClick/Onhover Javascript/jquery
- 如何从javascript/jquery中的复选框中获取布尔值
- javascript/jquery将utc转换为短格式的本地时间
- 在不设置协议的情况下,使用javascript/jquery更改iframe-src
- 如何向这个javascript/jquery函数添加参数
- 用JavaScript/jQuery点击图片,选中多个方框
- 使用Javascript/JQuery获取JSON GET数据
- 从数组中删除元素的最佳方法是:javascript/jquery
- Javascript/jQuery压缩一个图像正确的评论帖子,并使用Ajax Laravel 5.2保存到控制器中
- 用DRY方式Javascript/JQuery动态替换HTML
- 类似Javascript JQuery的库
- 如何在 Javascript/jQuery 中获取一些随机下拉列表的选定值