Javascript 在 html 页面之间共享数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11609376/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Share data between html pages
提问by Muhammad Usman
I want to send some data from one HTML page to another. I am sending the data through the query parameters like http://localhost/project/index.html?status=exist. The problem with this method is that data remains in the URL. Is there any other method to send the data across HTML pages using JavaScript or jquery.
我想将一些数据从一个 HTML 页面发送到另一个页面。我通过查询参数发送数据，如 http://localhost/project/index.html?status=exist. 这种方法的问题是数据保留在 URL 中。有没有其他方法可以使用 JavaScript 或 jquery 跨 HTML 页面发送数据。
回答by Neji
why don't you store your values in HTML5 storage objects such as sessionStorageor localStorage, visit HTML5 Storage Docto get more details. Using this you can store intermediate values temporarily/permanently locally and then access your values later.
为什么不将值存储在 HTML5 存储对象中，例如sessionStorage或localStorage，请访问HTML5 存储文档以获取更多详细信息。使用它，您可以在本地临时/永久存储中间值，然后稍后访问您的值。
To store values for a session:
要存储会话的值：
sessionStorage.getItem('label')
sessionStorage.setItem('label', 'value')
or more permanently:
或更永久：
localStorage.getItem('label')
localStorage.setItem('label', 'value')
So you can store (temporarily) form data between multiple pages using HTML5 storage objects which you can even retain after reload..
因此，您可以使用 HTML5 存储对象在多个页面之间存储（临时）表单数据，您甚至可以在重新加载后保留这些对象。
回答by user2359695
I know this is an old post, but figured I'd share my two cents. @Neji is correct in that you can use sessionStorage.getItem('label'), and sessionStorage.setItem('label', 'value')(although he had the setItemparameters backwards, not a big deal). I much more prefer the following, I think it's more succinct:
我知道这是一个旧帖子，但我想我会分享我的两分钱。@Neji 是正确的，您可以使用sessionStorage.getItem('label'), and sessionStorage.setItem('label', 'value')（尽管他的setItem参数倒过来了，没什么大不了的）。我更喜欢以下内容，我认为它更简洁：
var val = sessionStorage.myValue
in place of getItemand
代替getItem和
sessionStorage.myValue = 'value'
in place of setItem.
代替setItem.
Also, it should be noted that in order to store JavaScript objects, they must be stringified to set them, and parsed to get them, like so:
另外，应该注意的是，为了存储 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
The reason is that sessionStorage stores everything as a string, so if you just say sessionStorage.object = myObjectall you get is [object Object], which doesn't help you too much.
原因是 sessionStorage 将所有内容都存储为字符串，所以如果你只说sessionStorage.object = myObject你得到的只是 [object Object]，这对你没有太大帮助。
回答by Parv Sharma
possibly if you want to just transfer data to be used by JavaScript then you can use Hash Tags like this
可能如果您只想传输 JavaScript 使用的数据，那么您可以使用这样的哈希标签
http://localhost/project/index.html#exist
so once when you are done retriving the data show the message and change the
window.location.hash to a suitable value.. now whenever you ll refresh the page the hashtagwont be present
NOTE:when you will use this instead ot query strings the data being sent cannot be retrived/read by the server
所以一旦你完成检索数据显示消息并将 window.location.hash 更改为合适的值..现在每当你刷新页面时都hashtag不会出现
注意：当你使用它而不是查询字符串时服务器无法检索/读取正在发送的内容
回答by Christoph Martens
Well, you can actually send data via JavaScript - but you should know that this is the #1 exploit source in web pages as it's XSS :)
好吧，您实际上可以通过 JavaScript 发送数据 - 但您应该知道这是网页中排名第一的漏洞利用源，因为它是 XSS :)
I personally would suggest to use an HTML formular instead and modify the javascript data on the server side.
我个人建议改用 HTML 公式并修改服务器端的 javascript 数据。
But if you want to share between two pages (I assume they are not both on localhost, because that won't make sense to share between two both-backend-driven pages) you will need to specify the CORS headers to allow the browser to send data to the whitelisted domains.
但是如果你想在两个页面之间共享（我假设它们不在本地主机上，因为在两个后端驱动的页面之间共享是没有意义的）你需要指定 CORS 标头以允许浏览器将数据发送到白名单域。
These two links might help you, it shows the example via Node backend, but you get the point how it works:
这两个链接可能对您有所帮助，它通过 Node 后端显示示例，但您明白它是如何工作的：
And, of course, the CORS spec:
当然，还有 CORS 规范：
~Cheers
~干杯
