在页面加载之间保持变量

Question

我正在尝试捕获表单的“提交”按钮，如果表单已提交，页面将刷新，并显示一些隐藏的字段。我想捕获表单是否已经提交过，以及是否在重新加载时提交，我想取消隐藏隐藏字段。我试图使用全局变量来实现此目的，但是我无法使其正常运行。

这是我尝试过的：

  var clicked = false;

  $(document).ready(function() {

    $("input[type='submit'][value='Search']").attr("onclick", "form.act.value='detailSearch'; clicked = true;  return true;");

    if (clicked == true) {
      // show hidden fields
    } else {
      // don't show hidden fields
    }
  });

关于此代码有什么问题的任何建议？

Answer 1

由于HTTP是无状态的，因此每次加载页面时，它将使用JavaScript中设置的初始值。您不能在JS中设置全局变量，而只能在再次加载页面后保留该值。

有两种方法可以将值存储在其他位置，以便可以在加载时使用JavaScript对其进行初始化

请求参数

使用GET方法提交表单时，网址会使用查询字符串（?parameter=value&something=42）更新。您可以通过将表单中的输入字段设置为某个值来利用此功能。这将是最简单的示例：

<form method="GET">
    <input type="hidden" name="clicked" value="true" />
    <input type="submit" />
</form>

在页面初始加载时，未设置查询字符串。提交此表单时，输入name和的value组合在查询字符串中以形式传递clicked=true。因此，当页面再次使用该查询字符串加载时，您可以检查是否单击了按钮。

要读取此数据，可以在页面加载时使用以下脚本：

function getParameterByName(name) {
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

var clicked = getParameterByName('clicked');

（来源）

使用此功能的能力取决于您的表单当前的工作方式，如果您已经使用POST，则可能会出现问题。

另外，对于较大的数据集，这不是最佳的。传递字符串并不重要，但是对于数据的数组和对象，您可能应该使用Web存储或cookie。尽管各浏览器的细节有所不同，但URI长度的实际限制约为2000个字符

网络存储

随着HTML5的引入，我们还获得了Web存储，它使您可以跨页面加载在浏览器中保存信息。有localStorage哪些可以保存较长时间的数据（只要用户不手动清除），并sessionStorage只在当前浏览会话期间保存数据。后者对您很有用，因为您不希望在用户稍后返回时将“
clicked”设置为true。

在这里，我在按钮click事件上设置了存储，但是您也可以将其绑定到表单提交或其他任何东西。

$('input[type="submit"][value="Search"]').click(function() {
    sessionStorage.setItem('clicked', 'true');
});

然后，在加载页面时，可以使用以下方法检查页面是否已设置：

var clicked = sessionStorage.getItem('clicked');

即使仅在此浏览会话期间保存该值，也可能需要更早地重置它。为此，请使用：

sessionStorage.removeItem('clicked');

如果要保存JS对象或数组，则应将其转换为字符串。根据规范，应该可以保存其他数据类型，但这尚未在所有浏览器中正确实现。

//set
localStorage.setItem('myObject', JSON.stringify(myObject));

//get
var myObject = JSON.parse(localStorage.getItem('myObject'));

浏览器支持非常好，因此除非您需要支持真正的旧/模糊浏览器，否则应该放心使用。网络存储是未来。

饼干

Web存储的替代方法是将数据保存在cookie中。Cookies主要用于读取服务器端的数据，但也可以用于纯客户端html" target="_blank">数据。

您已经使用jQuery，这使得设置cookie变得非常容易。同样，我在click这里使用该事件，但可以在任何地方使用。

$('input[type="submit"][value="Search"]').click(function() {
    $.cookie('clicked', 'true', {expires: 1}); // expires in 1 day
});

然后在页面加载时，您可以像这样读取cookie：

var clicked = $.cookie('clicked');

由于Cookie在您的情况下跨会话持续存在，因此您需要在完成所有操作后立即将其取消设置。您不希望用户在一天后返回，并且仍然clicked设置为true。

if(clicked === "true") {
    //doYourStuff();
    $.cookie('clicked', null);
}

（可以在此处找到设置/读取Cookie的非jQuery方法）

我个人不会将Cookie用作记住单击状态的简单方法，但是如果不是查询字符串的选项，并且您需要支持不支持sessionStorage的真正的旧浏览器，那么它将起作用。您应该首先通过对sessionStorage的检查来实现这一点，并且只有在失败的情况下才使用cookie方法。

window.name

尽管对我来说这似乎是一种黑客，它可能起源于localStorage /
sessionStorage之前，但您可以在window.name属性中存储信息：

window.name = "my value"

它只能存储字符串，因此，如果要保存对象，则必须像上面的localStorage示例一样对它进行字符串化：

window.name = JSON.stringify({ clicked: true });

主要区别在于，此信息不仅在页面刷新中而且在不同的域中都保留。但是，它仅限于您所在的当前标签页。

这意味着您可以在页面上保存一些信息，并且只要用户停留在该选项卡中，即使他浏览了另一个网站并返回，您也可以访问该信息。通常，除非您需要在单个浏览会话中实际存储跨域信息，否则我建议不要使用此功能。