页面加载之间的持久变量

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在加载时初始化它

查询字符串

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

在页面的初始加载时，不设置查询字符串。提交此表单时，输入的名称和值组合将作为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');

（资料来源）

此外，对于较大的数据集，这不是最优的。传递字符串没什么大不了的，但是对于数组和数据对象，您可能应该使用Web存储或cookie。虽然不同浏览器的细节略有不同，但URI长度的实际限制约为2000个字符

Web存储

随着HTML5的引入，我们还获得了Web存储，它允许您跨页面负载在浏览器中保存信息。有LocalStorage可以将数据保存更长时间（只要用户不手动清除），还有SessionStorage只能在当前浏览会话期间保存数据。后者在这里对您很有用，因为您不想在用户稍后返回时将“clicked”设置为true。

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

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

浏览器支持非常好，所以您应该安全地使用它，除非您需要支持非常古老/晦涩的浏览器。网络存储是未来。

饼干

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

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

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

由于Cookie在您的情况下会跨会话持续存在，您将需要在完成需要处理的任何操作后立即解除它们的设置。您不会希望用户在一天后返回时仍然单击设置为true。

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

（在这里可以找到设置/读取cookie的非jQuery方式）

window.name

虽然这在我看来像是一个黑客攻击，可能起源于LocalStorage/SessionStorage之前，但您可以将信息存储在窗口名属性中：

window.name = "my value"

它只能存储字符串，所以如果您想保存一个对象，就必须像上面的localstorage示例一样对其进行字符串化：

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

主要的区别在于，这些信息不仅在页面刷新中保留，而且在不同的域中保留。但是，它仅限于您所在的当前选项卡。

这意味着您可以在页面上保存一些信息，只要用户停留在该选项卡上，即使他浏览到另一个网站并返回，您也可以访问相同的信息。一般来说，我建议不要使用此方法，除非您需要在单个浏览会话期间实际存储跨域信息。