Javascript 在页面加载之间持久化变量

我试图捕获表单的提交按钮，如果表单已提交，页面将刷新，并显示一些隐藏字段。我想捕获表单是否在之前提交过，如果在重新加载时提交，我想取消隐藏隐藏字段。我试图使用一个全局变量来实现这一点，但是我无法使它正常工作

以下是我尝试过的：

var=false；
$（文档）.ready（函数（）{
$（“input[type='submit'][value='Search']”）.attr（“onclick”，“form.act.value='detailSearch'；clicked=true；return true；”）；
如果（单击==true）{
//显示隐藏字段
}否则{
//不显示隐藏字段
}
});

关于此代码的错误有什么建议吗？

您可以尝试以下方法：

 $("input[type='submit'][value='Search']").click(function(){
     form.act.value='detailSearch'; 
     clicked = true;  
     return true;
});

---

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

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

---

查询字符串

使用

GET

方法提交表单时，url将使用查询字符串（

？parameter=value&something=42

）进行更新。您可以通过将表单中的输入字段设置为特定值来利用这一点。这是最简单的例子：

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

（）

能否使用它取决于您的表单当前的工作方式，如果您已经使用了帖子，那么这可能会有问题

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

---

网络存储

随着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'));

浏览器支持是安全的，除非您需要支持非常旧/晦涩的浏览器。Web存储是未来

---

Cookies

Web存储的另一种选择是将数据保存在cookie中。Cookie主要用于在服务器端读取数据，但也可用于纯客户端数据

您已经使用了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在会话中持续存在，您需要在完成任何需要处理的操作后立即取消设置cookie。您不希望用户在一天后返回，并且仍将

单击设置为true

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

（可以找到设置/读取Cookie的非jQuery方式）

我个人不会将cookie用于记住单击状态这样简单的事情，但是如果查询字符串不是一个选项，并且您需要支持不支持会话存储的非常旧的浏览器，那么这将起作用。您应该首先通过检查sessionStorage来实现这一点，并且只有当检查失败时，才使用cookie方法


窗口名称

虽然对我来说这似乎是一种可能起源于localStorage/sessionStorage之前的黑客行为，但您可以将信息存储在
窗口中。name
属性：

window.name = "my value"

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

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

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

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

保存全局作用域中单击的

变量的方法如下：

if(localeStorage.getItem("clicked") === null)
    localeStorage.setItem("clicked", "FALSE"); // for the first time

$(document).ready(function() {

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

    var clicked = localeStorage.getItem("clicked") == "FALSE" ? "TRUE" : "FALSE";

    localeStorage.setItem("clicked", clicked);

    if (clicked == "TRUE") {
      // show hidden fields
    } else {
      // don't show hidden fields
    }

});

试着利用

函数显示（）{
返回$（“表单输入[type=hidden]”）
.替换为（函数（i，el）{
返回“”
});
}
$.holdReady（真）；
if（history.state！==null&&history.state.clicked==true）{
//显示隐藏字段
//如果`history.state.clicked===true`，
//将“输入类型=隐藏”替换为“输入类型=文本”`
show（）；
console.log（历史记录）；
}否则{
//不显示隐藏字段
console.log（历史记录）；
}
$.holdReady（假）；
$（文档）.ready（函数（）{
$（“输入[type=submit][value=Search]”）
.在“点击”时，功能（e）{
e、 预防默认值（）；
if（history.state==null）{
if(localeStorage.getItem("clicked") === null)
    localeStorage.setItem("clicked", "FALSE"); // for the first time

$(document).ready(function() {

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

    var clicked = localeStorage.getItem("clicked") == "FALSE" ? "TRUE" : "FALSE";

    localeStorage.setItem("clicked", clicked);

    if (clicked == "TRUE") {
      // show hidden fields
    } else {
      // don't show hidden fields
    }

});