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

Question

在第1页上，我从阵列中的服务器传入了大量行数据（JSON）。
我想在第2页上显示此数据，这是单击第1页时要重定向到的页面。
我在服务器上使用Javascript / Jquery和PHP代码。

我在其他地方读到，可以使用表单来完成此操作，但是如何将值分配给字段？
有人可以证明这是如何完成的吗？

Answer 1

正如我在评论中所提到的，实现您想要的东西有多种方法，决定一个或另一个将高度取决于您想做的事情或方式：


数据量大吗？
您要在客户端还是服务器端完成？
您是否有安全方面的顾虑？
有带宽限制吗？
等等


在决定使用一种或另一种方法之前，您需要考虑这些问题的答案。以下是一些选项：



形式

您可以将数据放在第1页的form中（格式化或作为一个大块，将在第2页上重新处理），然后将数据从一个提交到另一个。

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

如果您已经有了将数据从第1页发送到第2页的表单，请考虑将其添加为可在第2页上阅读的隐藏输入。

优点：


易于实现。
多种可能性（GET或POST，全部在一个字段中或字段中的每个元素）
如果允许用户更改数据，则更加灵活。


缺点：


交通流量大。相同的数据将传播多次：服务器>客户端（在加载第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 cookie）


缺点：


尺寸有限。同样，这将取决于客户端使用的浏览器（ You can see some data on this web site）。
不如其他方法安全（您不能真正相信自己正在阅读的内容）。
用户可能已禁用/拒绝cookie（您不知道cookie是否在那里）。


对于您的特殊情况：我也不会采用这种方法。它的安全性较低，并且无论如何都会在每次加载页面时将cookie发送到服务器。



服务器数据库/文件

在将数据发送到页面1之前，将其存储在数据库中（如果您已经将其存储在数据库中，并且由于花费很长时间而不想重新运行查询，则可以创建结果的缓存版本），然后读取该记录在第2页上。

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

优点：


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


缺点：


复杂的实现（需要许可/解决方案的重新设计）。
数据仍将传输两次（服务器>页面1，服务器>页面2）。


对于您的特殊情况：这可能是您现在正在做的，并且您想更改它:)



索引数据库

另一个HTML5功能将允许您创建本地 object-oriented database，您可以在其中使用键索引存储和检索对象。

优点：


很棒的表演。
适用于大量数据。
数据存储在本地，不会传输到服务器。


缺点：


不完全支持（ see this page）。
复杂的实现。


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



LocalStorage / SessionStorage

HTML5引入了Web Storage API，它具有两种在用户浏览器中本地存储数据的方法： localStorage和 sessionStorage。两者之间的区别在于，即使关闭了浏览器（localStorage），其中一种数据仍将保留，而另一种则仅在页面会话处于活动状态（sessionStorage）时，数据仍将保留

<script type="text/javascript">
    localStorage.setItem("data", "YOUR DATA HERE");
</script>

优点：


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


缺点：


禁用cookie也会禁用LocalStorage。
安全页面上的LocalStorge值是隔离的（如果页面在http和https之间切换，则可能导致有趣的错误）。


对于您的特殊情况：只要您的数据大小在限制范围内，这就是我要使用的方法。