在页面加载之间存在variables
我正在尝试捕获我的表单提交button按下，如果提交表单，页面刷新，我显示一些隐藏的领域。 我想知道这个表格是否已经提交过，如果提交了，我想隐藏隐藏的字段。 我试图使用全局variables来实现这一点，但是我无法使其正常工作。
这是我试过的：
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 } }); 任何有关这个代码有什么问题的build议吗？
由于HTTP是无状态的，每次加载页面时，都会使用JavaScript中设置的任何初始值。 你不能在JS中设置一个全局variables，只需在加载页面后保持该值。
有几种方法可以将值存储在其他位置，以便您可以使用JavaScript在加载时对其进行初始化
查询string
当使用GET方法提交表单时，url会使用查询string（ ?parameter=value&something=42 ）更新。 您可以通过将表单中的input字段设置为特定值来利用此function。 这将是最简单的例子：
<form method="GET"> <input type="hidden" name="clicked" value="true" /> <input type="submit" /> </form>
在页面初始加载时，没有设置查询string。 提交此表单时，input的name和value组合将作为clicked=true传递到查询string中。 所以当页面再次加载该查询string时，您可以检查button是否被点击。
要阅读这些数据，您可以在页面加载时使用以下脚本：
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，那么这可能是有问题的。
另外，对于更大的数据集，这不是最佳的。 传递string不是什么大不了的事情，但是对于数组和数据对象，您应该使用Web存储或Cookie。 尽pipe浏览器的细节有所不同，但URI长度的实际限制大约为2000个字符
Web存储
随着HTML5的推出，我们还获得了networking存储，它允许您跨页面加载在浏览器中保存信息。 有一个localStorage可以保存更长时间的数据（只要用户没有手动清除它）， sessionStorage只保存当前浏览会话期间的数据。 后者在这里对你有用，因为你不想在用户晚点回来的时候将“clicked”设置为true。
在这里我设置了button点击事件的存储，但你也可以绑定它来形成提交或其他任何东西。
$('input[type="submit"][value="Search"]').click(function() { sessionStorage.setItem('clicked', 'true'); });
然后当你加载页面，你可以检查是否使用这个设置：
var clicked = sessionStorage.getItem('clicked');
即使此值仅在此浏览会话期间保存，也可能需要尽早重置。 为此，请使用：
sessionStorage.removeItem('clicked');
如果你想保存一个JS对象或数组，你应该将其转换为一个string。 根据规范，应该可以保存其他数据types，但是这在浏览器中还是没有正确实现。
//set localStorage.setItem('myObject', JSON.stringify(myObject)); //get var myObject = JSON.parse(localStorage.getItem('myObject'));
浏览器的支持是相当不错的，所以你应该安全地使用这个，除非你需要支持真正的老/晦涩的浏览器。 networking存储是未来。
cookies
Web存储的替代方法是将数据保存在cookie中。 Cookies主要用于读取服务器端的数据，但也可以用于纯粹的客户端数据。
您已经使用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); }
（一个非jQuery的方式来设置/读取cookie可以在这里find）
我个人不会使用一个简单的记住点击状态的cookie，但如果查询string不是一个选项，你需要支持真正的旧浏览器不支持sessionStorage这将工作。 你应该首先检查sessionStorage，只有在失败的时候使用cookie方法。
window.name
虽然这对我来说可能是源于localStorage / sessionStorage之前的东西，但是您可以将信息存储在window.name属性中：
window.name = "my value"
它只能存储string，所以如果你想保存一个对象，就必须像上面的localStorage例子那样把它们串起来：
window.name = JSON.stringify({ clicked: true });
主要区别在于，这些信息不仅保留在页面刷新中，还保存在不同的域中。 但是，它仅限于您所在的当前标签。
这意味着您可以在网页上保存一些信息，只要用户停留在该标签中，即使他浏览了另一个网站并返回，也可以访问相同的信息。 一般来说，我会build议不要使用这个，除非您需要在单个浏览会话期间实际存储跨域信息。
尝试使用$.holdReady() ， history
<script src="jquery.js" type="text/javascript"></script> </head> <body> <form method="POST"> <input type="text" name="name" value="" /> <input type="submit" value="Search" /> <input type="hidden" /> <input type="hidden" /> </form> <script type="text/javascript"> function show() { return $("form input[type=hidden]") .replaceWith(function(i, el) { return "<input type=text>" }); } $.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 }; }); }); </script> </body>
使用localeStorage或sessionStorage似乎是最好的select。
在全局范围内保存被clickedvariables的intead就是这样保存的：
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 } });
你可以试试这个：
$("input[type='submit'][value='Search']").click(function(){ form.act.value='detailSearch'; clicked = true; return true; });
