在 html 页面之间共享数据

IT技术 javascript jquery html
2021-02-02 17:33:58

我想将一些数据从一个 HTML 页面发送到另一个页面。我通过查询参数发送数据,如 http://localhost/project/index.html?status=exist. 这种方法的问题是数据保留在 URL 中。有没有其他方法可以使用 JavaScript 或 jquery 跨 HTML 页面发送数据。

4个回答

为什么不将值存储在 HTML5 存储对象中,例如sessionStoragelocalStorage,请访问HTML5 存储文档以获取更多详细信息。使用它,您可以在本地临时/永久存储中间值,然后稍后访问您的值。

要存储会话的值:

sessionStorage.setItem('label', 'value')
sessionStorage.getItem('label')

或更永久地:

localStorage.setItem('label', 'value')
localStorage.getItem('label')

因此,您可以使用 HTML5 存储对象在多个页面之间存储(临时)表单数据,您甚至可以在重新加载后保留这些对象。

此解决方案仅适用于页面位于同一域中的情况,因为localStorage无法访问来自其他域的数据。但是还有其他几种方法可以在不同域的页面之间共享数据。
2021-03-13 17:33:58
这很有用,谢谢,但是当尝试使用变量 ('value') 共享多个字段时,它不会设置从变量给定的值到网页之间的项目 ('label')。你能解释一下原因吗?
2021-03-24 17:33:58
我不明白你在哪里定义这条线?谢谢
2021-03-31 17:33:58

我知道这是一个旧帖子,但我想我会分享我的两分钱。@Neji 是正确的,因为您可以使用sessionStorage.getItem('label'), and sessionStorage.setItem('label', 'value')(尽管他的setItem参数倒过来了,没什么大不了的)。我更喜欢以下内容,我认为它更简洁:

var val = sessionStorage.myValue

代替getItem

sessionStorage.myValue = 'value'

代替setItem.

另外,应该注意的是,为了存储 JavaScript 对象,必须将它们字符串化以设置它们,并解析以获取它们,如下所示:

sessionStorage.myObject = JSON.stringify(myObject); //will set object to the stringified myObject
var myObject = JSON.parse(sessionStorage.myObject); //will parse JSON string back to object

原因是 sessionStorage 将所有内容都存储为字符串,所以如果你只说sessionStorage.object = myObject你得到的只是 [object Object],这对你没有太大帮助。

可能如果你只想传输数据以供 JavaScript 使用,那么你可以使用这样的哈希标签

http://localhost/project/index.html#exist

所以一旦你完成检索数据显示消息并将window.location.hash更改为合适的值..现在每当你刷新页面时都hashtag不会出现
注意:当你使用它而不是查询字符串时服务器无法检索/读取正在发送的内容

这不是“标签”。这是一个URL 片段
2021-03-28 17:33:58

好吧,您实际上可以通过 JavaScript 发送数据 - 但您应该知道这是网页中排名第一的漏洞利用源,因为它是 XSS :)

我个人建议改用 HTML 公式并修改服务器端的 javascript 数据。

但是如果你想在两个页面之间共享(我假设它们不在本地主机上,因为在两个后端驱动的页面之间共享是没有意义的)你需要指定 CORS 标头以允许浏览器将数据发送到白名单域。

这两个链接可能对您有所帮助,它通过 Node 后端显示示例,但您明白它是如何工作的:

链接 1

当然,还有 CORS 规范:

链接 2

~干杯