在HTML页面之间共享数据

Question

我希望能够从一个HTML页面向另一个页面发送一些数据。 我通过查询参数发送数据，例如http://localhost/project/index.html?status=exist。 这种方法的问题是数据保留在URL中。 是否有其他使用JavaScript或jQuery跨HTML页面发送数据的方法。

- Muhammad Usman

---

因为这里有很多与此堆栈溢出相关的问题，所以请点“踩”。 - Darshak

PHP的include可以节省很多时间...相信我。 - csandreas1

可能是在页面加载之间保留变量的重复问题。 - Liam

截至2019年5月，这是涉及该特定问题的谷歌搜索结果中排名最高的一个。如果有其他问题，应将其重定向到此问题。 - Jess

不，这不是工作方式。最好的质量问题或答案才是正确的目标。重复目标上的答案比这里的任何内容都要好得多。 - Liam

Answer 1

为什么不将你的值存储在HTML5存储对象中，例如sessionStorage或localStorage，请访问HTML5 Storage Doc了解更多细节。使用这种方法，您可以在本地暂时/永久地存储中间值，然后稍后访问您的值。

要为会话存储值：

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

或者更加长久：

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

你可以使用HTML5存储对象，在多个页面之间存储（临时）表单数据，即使在重新加载页面后仍然保留。

- Neji

---

我不明白你在哪里定义这些行？谢谢；S - Alberto Acuña

非常感谢你提供的有用信息，但是在尝试使用变量('value')共享多个字段时，它并未将来自变量的值设置到Web页面之间的项目('label')中。能否请您解释一下原因？ - Kasumi Gunasekara

这个解决方案只适用于页面在同一个域名下的情况，因为localStorage无法访问其他域名下的数据。但是，有几种其他方法可以在不同域名下的页面之间共享数据。 - Anderson Green

Answer 2

我知道这是一个老帖子，不过我想分享我的意见。@Neji是正确的，你可以使用sessionStorage.getItem('label')和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]，这对你并没有太大帮助。

- user2359695

Answer 3

如果你想将数据传输给JavaScript使用，那么可以使用哈希标签进行传输，例如：

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

当您完成检索数据后，显示消息并将window.location.hash更改为适当的值。现在，每当您刷新页面时，hashtag将不会存在。
注意：当您使用此方法替代查询字符串时，服务器无法检索/读取发送的数据。

- Parv Sharma

---

这不是一个“hashtag”。它是一个URL片段。 - Anderson Green

Answer 4

其实你可以通过JavaScript发送数据 - 但你应该知道这是网页中第一大漏洞源，因为它是XSS :)

我个人建议使用HTML表单，并在服务器端修改JavaScript数据。

但如果您想在两个页面之间共享（我假设它们不都在本地主机上，因为在两个后端驱动的页面之间共享没有意义），则需要指定CORS头使浏览器能够将数据发送到白名单域。

这两个链接可能会对您有所帮助，它展示了通过Node后端的示例，但您可以理解它是如何工作的：

链接1

当然，还有CORS规范：

链接2

~干杯

- Christoph Martens