How do i pass data between javascript pages?

Your JavaScript page has retrieved some information from the user. Now you want to display another JavaScript page, which should also use that information. How do you pass it from the first page to the second? There are three simple solutions. The first two are safe and effective, with advantages and disadvantages to each. The third appears ideal but has a very serious security problem and should be avoided.

1. Submitting form data to a server-side script that then outputs a new JavaScript page containing the data. This is simple and reliable and works in all browsers, but requires support for server-side scripting of some kind (PHP, ASP, etc).

2. Passing form-style data in a URL to a new JavaScript page, without using any server-side scripts. This works in all browsers but supports a limited amount of data. It is the traditional way of solving the problem without server-side scripting.

3. Passing data via the window.name property. Although this is not the intended purpose of window.name, it seems to work quite well and supports larger amounts of data than the second method. And it works in Safari, Firefox, and Internet Explorer

. So why not use it? Because it is highly insecure! If the user follows a link to another website that doesn't belong to you, that other website can still see the data stored in window.name, which was never meant to be a secure, site-specific property. So I strongly discourage the use of this method.

When possible, it's best to use the first method, because the amount of data you can pass is essentially unlimited. I'll demonstrate the first two methods and give an overview of the third, but as I said, the third is unsafe and you should not use it.

1. Using a Server-Side Script

When server-side scripting is available, this is the best approach. Let's assume you have a JavaScript array of strings you'd like to pass to a new web page:

<script>
var data = new Array();
data[0] = "one, a datum";
data[1] = "two, a deer";
data[2] = "three, a slash: \\";
data[3] = "four has quotes: \"I forget what four was for\"";
</script>

To pass this array to a script on a new page without packing it into a long URL (remember, URLs are limited to a practical maximum of 2,083 characters in the most popular web browser, and long URLs don't look very pretty either), we can use a hidden form in the first page, and submit this form to a PHP script on the server using the POST method. The GET and POST methods differ in that a GET-method form submission packs everything in the URL, which is nice for bookmarkable searches but a poor choice for large amounts of data. The POST method submits the data outside of the URL, without a length limit.

You could call the sendData function from any JavaScript code. Calling it when a link is clicked is simply one example.

We'll use a hidden field in the hidden form to pass the information. A hidden form field is a single string, so we'll pack the array into it by using a comma to separate elements of the array. And since the data might also contain commas, we'll use JavaScript's escape() function to encode these, so that they can't be confused with our separators. We'll name both the form and the hidden field within it data. When we do this, we access set the contents of the hidden field using the JavaScript syntax document.data.data.value (read from right to left: the value of the field named data, in the form named data, in the document).

the two listings that follow are passdata1a.html and passdata1b.php. passdata1a.html passes an array of JavaScript data to passdata1b.php when a link is clicked.

passdata1a.html

<script>
var data = new Array();
data[0] = "one, a datum";
data[1] = "two, a deer";
data[2] = "three, a slash: \\";
data[3] = "four has quotes: \"I forget what four was for\"";
</script>
<form name="data" method="POST" action="passdata1b.php">
<input type="hidden" name="data">
</form>
<script>
function sendData()
{
  // Initialize packed or we get the word 'undefined'
  var packed = "";
  for (i = 0; (i < data.length); i++) {
    if (i > 0) {
      packed += ",";
    }
    packed += escape(data[i]);
  }
  document.data.data.value = packed;
  document.data.submit();
}
</script>
<h1>This is what the array contains:</h1>
<ul>
<script>
  for (i = 0; (i < data.length); i++) {
    document.write("<li>" + data[i] + "</li>\n");
  }
</script>
</ul>
<a href="javascript:sendData();">Go to passdata1b.php</a>

passdata1b.php

<?php
  $packed = $_POST['data'];
  $data = split(",", $packed);
  for ($i = 0; ($i < count($data)); $i++) {
    # Undo what JavaScript's escape() function did
    $data[$i] = rawurldecode($data[$i]);
    # Slashes need escaping when they appear in code
    $data[$i] = str_replace("\\", "\\\\", $data[$i]);
    # Quotes need escaping too
    $data[$i] = str_replace("\"", "\\\"", $data[$i]);
  }
?>
<script>
  var data = new Array (
<?php
  for ($i = 0; ($i < count($data)); $i++) {
    if ($i > 0) {
      echo ",\n";
    }
    echo "    \"";
    echo $data[$i];
    echo "\"";
  }
?>
  );
</script>
<h1>This is what the data contains:</h1>
<ul>
<script>
  for (i = 0; (i < data.length); i++) {
    document.write("<li>" + data[i] + "</li>\n");
  }
</script>
</ul>

source http://www.boutell.com/newfaq/creating/scriptpass.html