javascript - 本地存储表单以将最后一个当前表单设置为新的当前表单

Question

我知道标题听起来很难理解（奇怪），但这是它的解释：

假设我的页面上有 2 个表单。单击按钮会隐藏当前表单，然后显示另一个表单。我刷新页面。现在我希望刷新当前表单之前的表单在刷新之后也是当前表单。我知道它可以通过使用来完成，localStorage但我不知道如何。:P

代码（HTML）：

<div class="span5">
    <!-- Row's 2nd Column holding the sign-in/sign-up form -->
    <form action="login.php" method="post" class="form-signin" id="login_frm">
        <h2 class="form-signin-heading">Login</h2>
        <input class="input-xlarge" type="text" placeholder="Username" name="username" />
        <input class="input-xlarge" type="password" placeholder="Password" name="password" />
        <br/>
        <input type="submit" name="submit_login" value="Login" class="btn btn-primary" />
    </form>
    <form action="login.php" method="post" class="form-signin hide" id="register_frm">
        <h2 class="form-signin-heading">Register</h2>
        <input class="input-xlarge" type="text" placeholder="Username" name="username" />
        <input class="input-xlarge" type="password" placeholder="Password" name="password" />
        <input class="input-xlarge" type="password" placeholder="Confirm Password" name="confirm_password" />
        <br/>
        <input type="submit" name="submit_register" value="Register" class="btn btn-primary" />
    </form>
</div>

CSS： 使用引导程序 :)

JS：

var registerBtn = $("#register_button"); //storing the hyperlink of register in a variable
var i = 0; //click count
$(document).ready(function () {
    $("#register_button").on('click', function (e) {
        e.preventDefault();
        i++;
        if (i % 2 === 0) {
            $("#register_frm").fadeToggle('fast', function () {
                $("#login_frm").fadeToggle('fast');

            });
            $(this).text('Register');
        } else {
            $("#login_frm").fadeToggle('fast', function () {
                $("#register_frm").fadeToggle('fast');
            });
            $(this).text('Login');
        }
    });
});

Answer 1

这是一个解决方案，尽管由于 action 方法导致页面刷新，它作为 jsFiddle 不能很好地工作。PS。不需要本地存储（在传统意义上），这两个变量可以只是窗口本身的几个数据属性。

    $(document).ready(function () {
        var registerBtn = $("#register_button");
        var rform = $('#register_frm');
        var lform = $('#login_frm');
        lform.show();
        rform.hide();
        var i = 0;
        $("#register_button").on('click', function (e) {
            e.preventDefault();
            i++;
            if (i % 2 === 0) {
                rform.find('input[name = "username"]').val(window.data('username'));
                rform.find('input[name = "password"]').val(window.data('password'));
                $("#register_frm").fadeOut('fast', function () {
                    $("#login_frm").fadeIn('fast');
                });
                $(this).text('Register');
            } else {
                window.data('username', val('rform.find(input[name = "username"]'));
                window.data('password', val('rform.find(input[name = "password"]'));
                $("#login_frm").fadeOut('fast', function () {
                    $("#register_frm").fadeIn('fast');
                });
                $(this).text('Login');
            }
        });
    });

Answer 2

好吧，这应该是一个可行的解决方案。我已经用注释标记了新代码。

var registerBtn = $("#register_button"); //storing the hyperlink of register in a variable
var i = 0; //click count
$(document).ready(function () {
    $("#register_button").on('click', function (e) {
        e.preventDefault();
        i++;
        if (i % 2 === 0) {
            $("#register_frm").fadeToggle('fast', function () {
                $("#login_frm").fadeToggle('fast');

            });
            $(this).text('Register');
            localStorage.setItem("form", "login"); // < NEW CODE
        } else {
            $("#login_frm").fadeToggle('fast', function () {
                $("#register_frm").fadeToggle('fast');
            });
            $(this).text('Login');
            localStorage.setItem("form", "register"); // < NEW CODE
        }
    });
    // v NEW CODE v
    if (localStorage.getItem("form") == "register") {
        $("#register_button").click();
    }
    // ^ NEW CODE ^
});