在HTML页面之间共享数据

Share data between HTML pages

本文关键字:共享 数据 之间 HTML      更新时间:2024-01-17

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

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

存储会话的值:

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

或更永久地:

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

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

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

var val = sessionStorage.myValue

代替getItem

sessionStorage.myValue = 'value'

代替CCD_ 8。

此外,需要注意的是,为了存储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都不会出现
注意:当您将使用它来代替查询字符串时,服务器无法检索/读取正在发送的数据

实际上,您可以通过JavaScript发送数据,但您应该知道,这是网页中的头号漏洞来源,因为它是XSS:)

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

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

这两个链接可能会对您有所帮助,它通过Node后端显示了示例,但您了解它的工作原理:

链路1

当然,还有CORS规范:

链路2

~欢呼