由于 HTTP 是无状态的,每次加载页面时,它将使用您在 JavaScript 中设置的任何初始值。您不能在 JS 中设置全局变量,并在再次加载页面后简单地保留该值。
有几种方法可以将值存储在另一个位置,以便您可以在加载时使用 JavaScript 对其进行初始化
请求参数
使用该GET
方法提交表单时,url 将使用查询字符串 ( ?parameter=value&something=42
)进行更新。您可以通过将表单中的输入字段设置为特定值来利用此功能。这将是最简单的例子:
<form method="GET">
<input type="hidden" name="clicked" value="true" />
<input type="submit" />
</form>
在页面的初始加载时,没有设置查询字符串。当您提交此表单时,输入的name
和value
组合在查询字符串中作为 传递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');
(来源)
使用它的能力取决于您的表单当前的工作方式,如果您已经使用了 POST,那么这可能会出现问题。
此外,对于较大的数据集,这不是最佳的。传递字符串没什么大不了的,但对于数组和数据对象,您可能应该使用 Web Storage 或 cookie。虽然浏览器之间的细节略有不同,但 URI 长度的实际限制约为2000 个字符
网络存储
随着 HTML5 的引入,我们还获得了 Web Storage,它允许您跨页面加载在浏览器中保存信息。有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 存储的替代方法是将数据保存在 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 在您的情况下跨会话持续存在,您需要在完成任何需要对其进行处理后立即取消设置。您不希望用户在一天后回来并且仍然clicked
设置为 true。
if(clicked === "true") {
//doYourStuff();
$.cookie('clicked', null);
}
(可以在此处找到设置/读取 cookie 的非 jQuery 方式)
我个人不会将 cookie 用于记住点击状态这样简单的事情,但是如果查询字符串不是一个选项,并且您需要支持不支持 sessionStorage 的非常旧的浏览器,这将起作用。您应该首先通过检查 sessionStorage 来实现它,并且只有在失败时才使用 cookie 方法。
窗口名称
虽然这对我来说似乎是一种黑客攻击,可能起源于 localStorage/sessionStorage 之前,但您可以将信息存储在window.name
属性中:
window.name = "my value"
它只能存储字符串,所以如果你想保存一个对象,你必须像上面的localStorage
例子一样对其进行字符串化:
window.name = JSON.stringify({ clicked: true });
主要区别在于,此信息不仅保留在页面刷新中,还保留在不同的域中。但是,它仅限于您所在的当前选项卡。
这意味着您可以在页面上保存一些信息,只要用户停留在该选项卡中,即使他浏览到另一个网站并返回,您也可以访问相同的信息。一般来说,除非您需要在单个浏览会话期间实际存储跨域信息,否则我建议不要使用它。