栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 面试经验 > 面试问答

在页面加载之间保持变量

面试问答 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

在页面加载之间保持变量

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

有两种方法可以将值存储在其他位置,以便可以在加载时使用Javascript对其进行初始化


请求参数

使用

GET
方法提交表单时,网址会使用查询字符串(
?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 ? "" : depreURIComponent(results[1].replace(/+/g, " "));}var clicked = getParameterByName('clicked');

(来源)

使用此功能的能力取决于您的表单当前的工作方式,如果您已经使用POST,则可能会出现问题。

另外,对于较大的数据集,这不是最佳的。传递字符串并不重要,但是对于数据的数组和对象,您可能应该使用Web存储或cookie。尽管各浏览器的细节有所不同,但URI长度的实际限制约为2000个字符


网络存储

随着HTML5的引入,我们还获得了Web存储,它使您可以跨页面加载在浏览器中保存信息。有

localStorage
哪些可以保存较长时间的数据(只要用户不手动清除),并
sessionStorage
只在当前浏览会话期间保存数据。后者对您很有用,因为您不希望在用户稍后返回时将“
clicked”设置为true。

在这里,我在按钮click事件上设置了存储,但是您也可以将其绑定到表单提交或其他任何东西。

$('input[type="submit"][value="Search"]').click(function() {    sessionStorage.setItem('clicked', 'true');});

然后,在加载页面时,可以使用以下方法检查页面是否已设置:

var clicked = sessionStorage.getItem('clicked');

即使仅在此浏览会话期间保存该值,也可能需要更早地重置它。为此,请使用:

sessionStorage.removeItem('clicked');

如果要保存JS对象或数组,则应将其转换为字符串。根据规范,应该可以保存其他数据类型,但这尚未在所有浏览器中正确实现。

//setlocalStorage.setItem('myObject', JSON.stringify(myObject));//getvar myObject = JSON.parse(localStorage.getItem('myObject'));

浏览器支持非常好,因此除非您需要支持真正的旧/模糊浏览器,否则应该放心使用。网络存储是未来。


饼干

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

(可以在此处找到设置/读取cookie的非jQuery方法)

我个人不会将cookie用作记住单击状态的简单方法,但是如果不是查询字符串的选项,并且您需要支持不支持sessionStorage的真正的旧浏览器,那么它将起作用。您应该首先通过对sessionStorage的检查来实现这一点,并且只有在失败的情况下才使用cookie方法。


window.name

尽管对我来说这似乎是一种黑客,它可能起源于localStorage /
sessionStorage之前,但您可以在

window.name
属性中存储信息:

window.name = "my value"

它只能存储字符串,因此,如果要保存对象,则必须像上面的

localStorage
示例一样对它进行字符串化:

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

主要区别在于,此信息不仅在页面刷新中而且在不同的域中都保留。但是,它仅限于您所在的当前标签页。

这意味着您可以在页面上保存一些信息,并且只要用户停留在该选项卡中,即使他浏览了另一个网站并返回,您也可以访问该信息。通常,除非您需要在单个浏览会话中实际存储跨域信息,否则我建议不要使用此功能。



转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/393957.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号