html5登录localstorage几天

Question

Html5 login localstorage for days. This HTML5 Login script uses localstorage to stores users that and everything works fine. But I need to add one more thing. I want once the user log in for the first time, the app will store the users info in html5 browser for like 30 days, when 30 days elapse, the user will be redirected back to login again. Can someone help me with that? Thanks.

<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">&nbsp;<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>

Answer 1

As I mentioned in a comment (and Shomz mentioned in his answer), you need to set the current date in the local storage just as you store the username and password (are you sure you need to store the password in local storage -- doesn't seem necessary) and then check if that value is set and compare it to the current date.

Update: fixing the code (forgot to convert the local storage date from a string back to a date object, plus I had a missing close bracket, oops!).

jsfiddle with an example usage: http://jsfiddle.net/uqpywLv3/17/

<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">&nbsp;<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>

Answer 2

只需在localStorage中设置数据时（通过其中的另一个变量），每次加载应用程序时，检查该值并将其与当前日期/时间进行比较。

Answer 3

1) localstorage data won't expire like cookie. it will stay like it for years. 2) if you want to set expiration date add expiration date as value to localstorage then retrieve this info every time and check you condition like number of days, or hours, or months. or 3) use cookie where you can set expiration date.