将数据从一个网页传递到另一个网页
[英]Passing data from one web page to another
问题描述
I need to pass a potentially large amount of data from one page to another using client side techniques.
我需要使用客户端技术将潜在的大量数据从一个页面传递到另一个页面。 It is basically a list of id's which will get displayed on the target page.它基本上是一个将显示在目标页面上的 id 列表。 Obviously query string is not suitable as there could be thousands of ids so I thought I could use javascript to dynamically add a form (method=GET), write the ids into a hidden field and submit the form to the target page.显然查询字符串不合适，因为可能有数千个 id，所以我想我可以使用 javascript 动态添加表单（method=GET），将 id 写入隐藏字段并将表单提交到目标页面。 It seems to work ok but I want to know if there is a better way of doing it - this feels a bit hacky.它似乎工作正常，但我想知道是否有更好的方法 - 这感觉有点麻烦。
3 个解决方案
解决方案1
10 2012-11-22 09:18:02
By using HTML5 Storage API you can achieve this...通过使用 HTML5 存储 API，您可以实现...
With HTML5, web pages can store data locally within the user's browser.使用 HTML5，网页可以在用户浏览器中本地存储数据。
Earlier, this was done with cookies.早些时候，这是用 cookie 完成的。 However, Web Storage is more secure and faster.但是，Web Storage 更安全、更快速。 The data is not included with every server request, but used ONLY when asked for.数据并不包含在每个服务器请求中，而是仅在被要求时使用。 It is also possible to store large amounts of data, without affecting the website's performance.还可以在不影响网站性能的情况下存储大量数据。
The data is stored in key/value pairs, and a web page can only access data stored by itself.数据以键/值对的形式存储，一个网页只能访问自己存储的数据。
-
localStorage- stores data with no expiration datelocalStorage- 存储没有到期日期的数据 sessionStorage- stores data for one sessionsessionStorage- 存储一个会话的数据
Example:例子：
To set设置
window.localStorage.setItem("name",document.getElementById("name").value);
To get要得到
var name = window.localStorage.getItem("name");
For more reference see HTML5 storage有关更多参考，请参阅HTML5 存储
Note: Web storage is supported in Internet Explorer 8+, Firefox, Opera, Chrome, and Safari.注意： Internet Explorer 8+、Firefox、Opera、Chrome 和 Safari 支持 Web 存储。
解决方案2
1 2012-11-22 09:11:43
Thusends of IDs isn't so much.因此，ID 的结尾并没有那么多。 If the IDs are GUIDs there will be Nx32 bytes.如果 ID 是 GUID，则将有 Nx32 个字节。 You could use jQuery post, which will trigger a HTTP Post.您可以使用 jQuery post，它会触发 HTTP Post。
解决方案3
1 2021-03-10 02:25:59
- If there's not TOO much data, you can also add a hash value to the end of the URL, and have the new page grab that value when it loads如果没有太多数据，您还可以在 URL 末尾添加一个哈希值，并让新页面在加载时抓取该值
- https://developer.mozilla.org/en-US/docs/Web/API/URL/hash https://developer.mozilla.org/en-US/docs/Web/API/URL/hash
- Here's some code that demos this:下面是一些演示这个的代码：
page-1.html page-1.html
<html>
<head>
<meta charset="utf-8"/>
<title>Page 1</title>
</head>
<body>
<input id="txtMessage" type="text" value="Hello">
<button id="btnSend">Send</button>
<script>
btnSend.onclick = () => {
const message = txtMessage.value || "No message defined";
window.location = "page-2.html#" + message;
};
</script>
</body>
</html>
page-2.html page-2.html
<html>
<head>
<meta charset="utf-8"/>
<title>Page 2</title>
</head>
<body>
<h2>The message is ...</h2>
<p id="output"></p>
<script>
let message = location.hash;
message = message.substring(1); // strip off leading #
message = decodeURI(message); // get rid of %20 for spaces
output.innerHTML = message;
</script>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.