Javascript 本地存储表单，将最后一个当前表单设置为新的当前表单

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

假设我的页面上有两个表单。单击按钮可隐藏当前窗体，然后显示另一个窗体。我刷新页面。现在我希望刷新之前的表单（当前表单）在刷新之后也是当前表单。我知道这可以通过使用

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>

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

---

好吧，这里应该有一个有效的解决方案。我用注释标记了新代码

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

var registerBtn=$（“#register_按钮”）//在变量中存储寄存器的超链接
var i=0//点击计数
$（文档）.ready（函数（）{
$（“#注册#按钮”）。在（'click'，函数（e）{
e、 预防默认值（）；
i++；
如果（i%2==0）{
$（“#寄存器_frm”）.fadeToggle（'fast'，function（）{
$（“#login_frm”）.fadeToggle（'fast'）；
});
$（this.text（'Register'）；
setItem（“表单”、“登录”）；//<新代码
}否则{
$（“#login_frm”）.fadeToggle（'fast'，function（）{
$（“#register_frm”）.fadeToggle（'fast'）；
});
$（this.text（'Login'）；
setItem（“form”、“register”）；//<新代码
}
});
//新代码
if（localStorage.getItem（“表单”）=“寄存器”）{
$（“#注册按钮”）。单击（）；
}
//^新代码^
});

这里有一个解决方案，尽管由于action方法的页面刷新，它不如JSFIDLE好用。不需要本地存储（在传统意义上），这两个变量可以只是窗口本身的两个数据属性

    $(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');
            }
        });
    });

---

使用PHP可以更轻松地做到这一点，为什么选择本地存储呢？@DevlshOne我想他希望在客户端做到这一点。PHP需要在单击按钮隐藏表单时刷新页面，或者通过Ajax获得通知（可能比使用

localStorage

的代码要多）。因此，如果登录信息在提交后无效，那么注册表单应该出现吗？这就是我读这篇文章的方式吗？@DevlshOne我怎么理解的是，有一个单独的按钮在两种形式之间切换。切换是使用jQuery完成的。@Pietu1998是的，它是正确的。和DevlshOne，如果登记表提交错误，则应显示为未隐藏，登录表应显示为隐藏。