在页面加载之间存在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的namevalue组合将作为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> 

    使用localeStoragesessionStorage似乎是最好的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; }); 
      Interesting Posts