Question

我需要使用客户端技术将潜在的大量数据从一个页面传递到另一个页面。它基本上是一个id列表，它将显示在目标页面上。显然查询字符串不合适，因为可能有数千个ID，所以我认为我可以使用javascript动态添加表单（method = GET），将id写入隐藏字段并将表单提交到目标页面。它似乎工作正常，但我想知道是否有更好的方法 - 这感觉有点hacky。

Answer 1

使用html5 storage api即可实现此目标......

使用HTML5，网页可以在用户的浏览器中本地存储数据。

早些时候，这是用cookies完成的。但是，Web存储更安全，更快捷。每个服务器请求都不包含这些数据，但仅在被要求时使用。它还可以存储大量数据，而不会影响网站的性能。

数据存储在键/值对中，网页只能访问自己存储的数据。

localStorage - 存储没有过期日期的数据
sessionStorage - 存储一个会话的数据

示例：

设置

window.localStorage.setItem("name",document.getElementById("name").value);

获得

var name = window.localStorage.getItem("name");

有关详情，请参阅HTML5 storage

注意： Internet Explorer 8+, Firefox, Opera, Chrome, and Safari支持网络存储。

Answer 2

ID的Thusends不是那么多。如果ID是GUID，则将有Nx32个字节。您可以使用jQuery post，它将触发HTTP Post。

Answer 3

如果没有太多数据，您还可以在 URL 末尾添加一个哈希值，并让新页面在加载时抓取该值
https://developer.mozilla.org/en-US/docs/Web/API/URL/hash
以下是一些演示代码：

page-1.html

   country  colour ...
1    Spain   red
2    USA     blue
3    Greece  green
4    Italy   white
5    USA     red
6    USA     blue
7    Spain   red

page-2.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>

将数据从一个网页传递到另一个网页

3 个答案: