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

Question

On Page 1, I have a large number of row data(JSON) coming in from server in an array. I want to display this data on Page 2 which is the page to be redirected to on clicking a Page 1. I am using Javascript/Jquery and PHP code on server.

I read elsewhere that this can be done using forms, but how do I assign values to to the fields? Can someone show how exactly this is done?

Answer 1

As I mentioned in the comments, there are multiple ways of achieving what you want, deciding on one or another will highly depend on how or what you want to do:

• Is it a large amount of data?
• Do you want it to be done in client or server side?
• Do you have any security concerns?
• Are there any bandwidth limitations?
• etc.

You need to consider the answer to those questions before deciding from one method or another. Here are some options:

---

Forms

You could put the data in a form on page 1 (either formatted or just as one big chunk that will be reprocessed on page 2), and submit the data from one to the other.

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

If you already have a form to send data from page 1 to page 2, then consider adding it as a hidden input that you can read on page 2.

Pros:

• Easy to implement.
• Various possibilities (GET or POST, all in one field or each element in a field)
• More flexible if you allow user to make changes to the data.

Cons:

• Heavy traffic load. The same data would travel multiple times: server > client (when loading page 1), client > server (submitting form), server > client (loading page 2).
• Limited size if you use the GET method: you'd be restricted in size limit by server and client (browser).

For your particular case : I probably wouldn't go for this method as you would be sending (a large amount of) data back and forth, and that is not good for performance, specially in mobile connections.

---

Cookies

You could store the data in a cookie on page 1, then read that cookie on page 2. And you could implement it in JavaScript (client side) or PHP (server side) and the result would be equivalent.

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

Pros:

• Easy to implement.
• PHP or JavaScript, the result will be similar (unless you use some HTTPOnly cookies)

Cons:

• Limited size. Again it will depend on the browser that the client is using ( You can see some data on this web site ).
• Not as secure as other methods (you cannot really trust what you are reading).
• User may have disabled/rejected cookies (you don't know if the cookie will be there).

For your particular case : I wouldn't go for this method either. It is less safe and cookies are sent to the server with each page load anyway.

---

Server Database / Files

Store the data in a database before sending it to page 1 (if you already have it on a database and don't want to rerun the query because it takes a long time, you could create a cached version of the result), then read that record on page 2.

Alternatively, you could follow a similar approach but instead of storing the data on a table, save the results on a file. Then page 2 would read that file and get the data.

Pros:

• You always have control over the data.
• No need to worry if user has JavaScript/cookies activated.

Cons:

• Complex implementation (requires permissions / redesign of solution).
• Data will still travel twice (server > page1, and server > page2).

For your particular case : This is probably what you are doing right now, and you want to change it :)

---

IndexedDB

Another HTML5 feature that will allow you to create a local object-oriented database , where you can store and retrieve objects using a key index.

Pros:

• Good performance.
• Good for large amounts of data.
• Data is stored locally, it does not travel to the server.

Cons:

• Not fully supported ( see this page ).
• Complex implementation.

For your particular case : I wouldn't go with this method because it is complex and not fully supported.

---

LocalStorage / SessionStorage

HTML5 introduced the Web Storage API with two methods to store data locally within the user's browser: localStorage and sessionStorage . The difference between the two is that with one the data will persist even when the browser is closed (localStorage), while with the other the data will only live while the page session is active (sessionStorage)

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

Pros:

• Easy to implement.
• It allows larger amounts of data than cookies (at least 5MB).
• Data is stored locally, it does not travel to the server.

Cons:

• Disabling cookies will disable LocalStorage too.
• LocalStorge values on secure pages are isolated (which can lead to interesting errors if your page changes between http and https).

For your particular case : This is the method I would go with, as long as the size of your data fits within the limits.

Answer 2

you are getting data in an array on page 1. you will have to pass this data on page 2 to display results there. For passing the data to page 2, following steps should be performed.
1. get json array and serialize it. {best alternative is get the parameters you are using to get json data. pass those parameters to page 2 and use them to get json data. so instead of passing array of json data pass parameters by which you can generate json data again from page 2.}
2. To pass the parameters/json data serialized one whichever you prefer, hide the data in dom. the hidden data will be inside form.

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

3. on page 2, make use of the data you have posted to show array.