Javascript html5登录localstorage达天
Html5登录localstorage达天。这个HTML5登录脚本使用localstorage来存储用户,并且一切正常。 但我还需要补充一点。我想一旦用户第一次登录,应用程序将存储在html5的用户信息 使用浏览器30天,当30天过去后,用户将被重定向回再次登录。有人能帮我吗? 谢谢Javascript html5登录localstorage达天,javascript,html,Javascript,Html,Html5登录localstorage达天。这个HTML5登录脚本使用localstorage来存储用户,并且一切正常。 但我还需要补充一点。我想一旦用户第一次登录,应用程序将存储在html5的用户信息 使用浏览器30天,当30天过去后,用户将被重定向回再次登录。有人能帮我吗? 谢谢 $(文档).ready(函数(){ $('.send')。单击(函数(){ var uname=$('#uname').val(); var pass=$('#pass').val(); 如果(uname==“”
$(文档).ready(函数(){
$('.send')。单击(函数(){
var uname=$('#uname').val();
var pass=$('#pass').val();
如果(uname==“”){
$('.error').effect(“bounce”,500).fadeIn(400.html('输入您的用户名');
}
否则如果(通过==“”){
$('.error').effect(“bounce”,500).fadeIn(400).html(“输入密码”);
}
否则{
$('.error').hide();
var userdata=“uname=“+uname+”&pass=“+pass;
window.localStorage[“uname”]=uname;
window.localStorage[“pass”]=pass;
$(“#加载程序”).show();
$(“#加载程序”).fadeIn(400).html('检查您的详细信息');
$.ajax({
类型:“post”,
数据:userdata,
url:“http://localhost/login.php",
cache:false,
成功:功能(msg){
$(“#加载程序”).hide();
$('.error').fadeIn(200.html(msg);
}
});
}
});
});
只要在本地存储中设置数据(通过其中的另一个变量)时进行设置,每次应用程序加载时,检查该值并将其与当前日期/时间进行比较。正如我在评论中提到的(以及Shomz在回答中提到的),您需要在本地存储中设置当前日期,就像您存储用户名和密码一样(您确定需要在本地存储中存储密码吗?似乎没有必要),然后检查该值是否已设置,并将其与当前日期进行比较
更新:修复代码(忘记将本地存储日期从字符串转换回日期对象,加上缺少右括号,哎呀!)
jsfiddle的一个示例用法:
$(文档).ready(函数(){
$('.send')。单击(函数(){
var uname=$('#uname').val();
var pass=$('#pass').val();
如果(uname==“”){
$('.error').effect(“bounce”,500).fadeIn(400.html('输入您的用户名');
}
否则如果(通过==“”){
$('.error').effect(“bounce”,500).fadeIn(400).html(“输入密码”);
}
否则{
$('.error').hide();
var userdata=“uname=“+uname+”&pass=“+pass;
window.localStorage[“uname”]=uname;
window.localStorage[“pass”]=pass;
//是否需要存储密码?
$(“#加载程序”).show();
$(“#加载程序”).fadeIn(400).html('检查您的详细信息');
$.ajax({
类型:“post”,
数据:userdata,
url:“http://localhost/login.php",
cache:false,
成功:功能(msg){
//存储当前日期
window.localStorage[“ldate”]=新日期();
$(“#加载程序”).hide();
$('.error').fadeIn(200.html(msg);
}
});
}
});//结束。发送单击处理程序
//检查用户是否已登录
if(window.localStorage的类型[“ldate”]!=“未定义”){
//localstorage似乎将日期存储为字符串
//因此,将其转换为日期对象
var memDate=新日期(window.localStorage[“ldate]”);
var expDate=new Date();//当前日期。
expDate.setDate(-30);//设置为30天前。
如果(memDate>expDate){
//用户的上次登录仍然有效
//在这里做你认为合适的事
}否则{
//用户最后一次登录是在30天前
//也许可以调用函数将它们从服务器端注销
//并显示登录表单?
}
}否则{
//用户未登录。
//在此处输入显示登录表单的代码
}
});
1)本地存储数据不会像cookie一样过期。它将像这样保持多年。
2) 如果要设置过期日期,请将过期日期添加为localstorage的值,然后每次检索此信息,并检查天数、小时数或月数等条件。
或
3) 使用cookie设置过期日期 您只在客户端(javascript)上显示登录表单提交的代码,因此很难给出解决方案的完整代码示例。您应该做的一件事是添加
window.localStorage[“lastsuccesfullogin”]=newdate()在登录的成功函数中输入code>。这将设置当前日期。然后你会在你用来检查用户当前是否登录的代码的任何部分进行检查。你有整理过吗?你看到我的答案的更新了吗(我修正了代码)?@mason81,半小时前刚刚看到你的评论基本上说了同样的话。你为什么不把它写下来作为答案呢?是的,我不想偷你的答案。我很感激Shomz。我提交了一个答案,它很难看,但希望它能充分表达我的观点。它不起作用。“提交”按钮不再可单击。再进一步help@Sectona--如果看不到更多的代码(以及如何选择实现底部条件语句的内部块),就很难确定。您是否在控制台中收到任何消息(例如:在Chrome中测试并使用Ctrl+Shift+J)?我对发送按钮的单击处理程序所做的唯一更改是添加window.localStorage[“ldate”]=new Date()
指向ajax调用的success函数。“我不认为这会伤害任何事。”我更新了我的答案。我缺少一个结束括号,忘记将本地存储日期转换回日期
<script>
$(document).ready(function(){
$('.send').click(function(){
var uname=$('#uname').val();
var pass=$('#pass').val();
if(uname==""){
$('.error').effect("bounce",500).fadeIn(400).html('Enter Your Username');
}
else if(pass==""){
$('.error').effect("bounce",500).fadeIn(400).html('Enter your password');
}
else{
$('.error').hide();
var userdata= "uname="+uname+"&pass="+pass;
window.localStorage["uname"] = uname;
window.localStorage["pass"] = pass;
$("#loader").show();
$("#loader").fadeIn(400).html('<img src="loader.gif" align="absmiddle"> <span class="loading">Checking your details</span>');
$.ajax({
type:"post",
data:userdata,
url:"http://localhost/login.php",
cache:false,
success:function(msg){
$("#loader").hide();
$('.error').fadeIn(200).html(msg);
}
});
}
});
});
</script>
<script>
$(document).ready(function(){
$('.send').click(function(){
var uname=$('#uname').val();
var pass=$('#pass').val();
if(uname==""){
$('.error').effect("bounce",500).fadeIn(400).html('Enter Your Username');
}
else if(pass==""){
$('.error').effect("bounce",500).fadeIn(400).html('Enter your password');
}
else{
$('.error').hide();
var userdata= "uname="+uname+"&pass="+pass;
window.localStorage["uname"] = uname;
window.localStorage["pass"] = pass;
// is storing the password this necessary?
$("#loader").show();
$("#loader").fadeIn(400).html('<img src="loader.gif" align="absmiddle"> <span class="loading">Checking your details</span>');
$.ajax({
type:"post",
data:userdata,
url:"http://localhost/login.php",
cache:false,
success:function(msg){
// store the current date
window.localStorage["ldate"] = new Date();
$("#loader").hide();
$('.error').fadeIn(200).html(msg);
}
});
}
}); // end .send click handler
// check if the user is logged in
if (typeof window.localStorage["ldate"] != "undefined") {
// localstorage seems to store the date as a string
// so convert it to a date object
var memDate = new Date(window.localStorage["ldate"]);
var expDate = new Date(); // current date.
expDate.setDate(-30); // set to 30 days ago.
if (memDate > expDate) {
// user's last login still valid
// do whatever you think is appropriate here
} else {
// user's last login was past 30 days ago
// perhaps call function to log them out on server side
// and show login form?
}
} else {
// the user is not logged in.
// put your code for showing the login form here
}
});
</script>