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

yduiuuwa  于 2021-09-23  发布在  Java
关注(0)|答案(4)|浏览(404)

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

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

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

aiazj4mn

aiazj4mn1#

由于http是无状态的,因此每次加载页面时,它都将使用javascript中设置的初始值。您不能在js中设置全局变量,而只是在再次加载页面后保持该值。
有几种方法可以将值存储在另一个位置,以便在加载时使用javascript对其进行初始化
查询字符串
使用 GET 方法,则使用查询字符串更新url( ?parameter=value&something=42 ). 您可以通过将表单中的输入字段设置为特定值来利用这一点。这是最简单的例子:

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

初始加载页面时,未设置任何查询字符串。当您提交此表格时 namevalue 输入的组合在查询字符串中作为 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个字符
网络存储
随着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存储是未来。
饼干
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。您不希望用户一天后回来,仍然有 clicked 设置为true。

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

(此处可以找到设置/读取cookie的非jquery方式)
我个人不会将cookie用于记住单击状态这样简单的事情,但是如果查询字符串不是一个选项,并且您需要支持不支持会话存储的非常旧的浏览器,那么这将起作用。您应该首先通过检查sessionstorage来实现这一点,并且只有当检查失败时,才使用cookie方法。
window.name
虽然对我来说这似乎是一种可能起源于localstorage/sessionstorage之前的黑客攻击,但您可以将信息存储在 window.name 财产:

window.name = "my value"

它只能存储字符串,因此如果要保存对象,必须像上面一样对其进行字符串化 localStorage 例子:

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

主要区别在于,这些信息不仅在页面刷新中保留,而且在不同的域中也保留。但是,它仅限于您当前所在的选项卡。
这意味着您可以在页面上保存一些信息,只要用户停留在该选项卡中,您就可以访问相同的信息,即使他浏览了另一个网站并返回。一般来说,我建议不要使用它,除非您需要在单个浏览会话期间实际存储跨域信息。

b4lqfgs4

b4lqfgs42#

利用 $.holdReady() , history ```
function show() {
return $("form input[type=hidden]")
.replaceWith(function(i, el) {
return ""
});
}

$.holdReady(true);
if (history.state !== null && history.state.clicked === true) {
// show hidden fields
// if history.state.clicked === true ,
// replace input type=hidden with input type=text
show();
console.log(history);

} else {
    // don't show hidden fields
    console.log(history);
}

$.holdReady(false);

$(document).ready(function() {

$("input[type=submit][value=Search]")
.on("click", function(e) {
    e.preventDefault();
    if (history.state === null) {
      // do stuff
      history.pushState({"clicked":true});
      // replace `input type=hidden` with `input type=text`
      show();
      console.log(history);
    } else {
      // do other stuff
    };
});

});

zaqlnxep

zaqlnxep3#

使用 localeStoragesessionStorage 似乎是最好的选择。
拯救世界 clicked 全局作用域中的变量以以下方式存储它:

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
    }

});
vtwuwzda

vtwuwzda4#

你可以试试这个:

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

相关问题