Javascript 我有大量来自服务器的行数据。如何在新页面（即重定向页面）上显示此数据？

在第1页，我有大量的行数据（JSON）以数组的形式从服务器传入。 我想在第2页上显示此数据，单击第1页时将重定向到该页。 我正在服务器上使用Javascript/Jquery和PHP代码

我在别处读到，这可以使用表单来完成，但是我如何为字段赋值呢？

---

有人能告诉你这是怎么做到的吗？

你在第1页的数组中获取数据。 您必须在第2页上传递这些数据才能在那里显示结果。 要将数据传递到第2页，应执行以下步骤。
1.获取json数组并将其序列化。 {最好的替代方法是获取用于获取json数据的参数。将这些参数传递到第2页并使用它们获取json数据。因此，不要传递json数据数组，而是传递参数，通过这些参数可以从第2页再次生成json数据。}
2.要传递序列化的参数/json数据，请选择其中一个， 在dom中隐藏数据。 隐藏的数据将在表单中

<form action='.page2' method='POST' id='redirect_form'>
  <hidden data in dom >
 <button type='submit' which on click redirects to page 2>
</form>

---

3.在第2页上，利用您发布的数据显示阵列。

正如我在评论中提到的，有多种方法可以实现您的目标，决定一种或另一种方法将在很大程度上取决于您的目标：

• 是大量的数据吗
• 您希望它在客户端还是服务器端完成
• 你有任何安全顾虑吗
• 有带宽限制吗
• 等等

在从一个方法或另一个方法中决定之前，你需要考虑这些问题的答案。以下是一些选项：

---

形式 您可以将数据放在第1页的

表格中（格式化或作为第2页将重新处理的一大块），然后将数据从一块提交到另一块

<form method="POST" action="page2.php">
    <textarea name="data">YOUR DATA HERE</textarea>
</form>


你的数据在这里

如果已经有一个表单将数据从第1页发送到第2页，那么考虑将其添加为可以在第2页上读取的隐藏输入。
优点：


易于实现
各种可能性（获取或发布，全部在一个字段中或字段中的每个元素）
如果允许用户对数据进行更改，则会更加灵活

缺点：


交通拥挤。相同的数据将多次传输：服务器>客户端（加载第1页时）、客户端>服务器（提交表单）、服务器>客户端（加载第2页）
如果使用GET方法，则限制大小：服务器和客户端（浏览器）会限制大小限制

对于您的特殊情况：我可能不会选择这种方法，因为您会来回发送（大量）数据，这对性能不好，特别是在移动连接中


曲奇饼
您可以将数据存储在第1页的cookie中，然后读取第2页的cookie。您可以在JavaScript（客户端）或PHP（服务器端）中实现它，结果将是等效的

<?php
    $cookie_name = "data";
    $cookie_value = "YOUR DATA HERE";
    setcookie($cookie_name, $cookie_value, time() + (3600 * 24), "/"); 
?>



优点：


易于实现
PHP或JavaScript，结果将是类似的（除非您使用一些HTTPOnly cookies）

缺点：


尺寸有限。同样，它将取决于客户端使用的浏览器（）
不像其他方法那样安全（你不能真正相信你正在阅读的内容）
用户可能已禁用/拒绝cookie（您不知道cookie是否存在）

对于你的特殊情况：我也不会选择这种方法。这样就不太安全了，每次加载页面时都会将cookie发送到服务器


服务器数据库/文件
在将数据发送到第1页之前，请将其存储在数据库中（如果数据库中已有数据，并且由于需要很长时间而不想重新运行查询，则可以创建结果的缓存版本），然后读取第2页上的记录

或者，您也可以采用类似的方法，但不是将数据存储在表中，而是将结果保存在文件中。然后第2页将读取该文件并获取数据

优点：


您始终可以控制数据
如果用户激活了JavaScript/cookies，则无需担心

缺点：


复杂的实施（需要解决方案的权限/重新设计）
数据仍将传输两次（服务器>第1页，服务器>第2页）

对于您的特定情况：这可能是您现在正在做的，您希望更改它：）


索引数据库
HTML5的另一个特性是创建一个本地索引，您可以在其中使用键索引存储和检索对象

优点：


表现不错
适用于大量数据
数据存储在本地，不会传输到服务器

缺点：


不完全支持（）
复杂的实现

对于您的特殊情况：我不会使用这种方法，因为它很复杂，而且不完全受支持


本地存储/会话存储
HTML5引入了Web存储API，它使用两种方法在用户浏览器中本地存储数据：和。两者之间的区别在于，其中一种情况下，即使在浏览器关闭时，数据也会保持不变（localStorage），而另一种情况下，数据只会在页面会话处于活动状态时保持不变（sessionStorage）


setItem（“数据”，“此处的数据”）；

优点：


易于实现
它允许比cookie更大的数据量（至少5MB）
数据存储在本地，不会传输到服务器

缺点：


禁用cookie也会禁用本地存储
安全页面上的LocalStorge值是隔离的（如果您的页面在http和https之间更改，则可能会导致有趣的错误）

对于您的特殊情况：这是我将采用的方法，只要数据的大小
<script type="text/javascript">
    localStorage.setItem("data", "YOUR DATA HERE");
</script>