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

【问题标题】：Locally storing form to set last current form to the new current form本地存储表单以将最后一个当前表单设置为新的当前表单
【发布时间】：2013-09-08 09:31:22
【问题描述】：

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

假设我的页面上有 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');
        }
    });
});

【问题讨论】：

使用 PHP 可以更轻松地做到这一点，为什么选择本地存储？
@DevlshOne 我想他想在客户端做这件事。 PHP 需要在单击按钮时刷新页面以隐藏表单，或者通过 Ajax 获得通知（可能比localStorage 更多的代码）。
那么，如果登录信息一旦提交就无效了，那么应该出现注册表吗？我是这样读的吗？
@DevlshOne 我的理解是有一个单独的按钮可以在两种形式之间切换。切换是使用 jQuery 完成的。
@Pietu1998 是的，没错。和 DevlshOne，如果注册表单被错误提交，它应该不会隐藏，登录表单应该隐藏。

标签： javascript jquery html forms twitter-bootstrap

【解决方案1】：

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

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 ^
});

【讨论】：

【解决方案2】：

这是一个解决方案，虽然它作为 jsFiddle 不能很好地工作，因为由于 action 方法导致页面刷新。 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');
            }
        });
    });

【讨论】：