Javascript: Is there a simple way to pass data from one webpage to the other?

Question

I have one .html file where I click some checkboxes and store some data on an array.

All I need is to pass the array data to one other .html file.

Searching on Stack Overflow I found some answers, for example "How to pass JavaScript object from one page to other".

From what I figured out one way is to use Web Storage API and specifically the Window.localStorage.

Use `sessionStorage` or `localStorage`. Or simply use `JSON.stringify(obj)` to get a string representation to pass in your querystring to the other page. The other page can then use `JSON.parse()` to get it back into an object. You may need to escape/unescape as a URL encoded string too. In any event, this is all quite simple to learn :) — ManoDestra, Jun 07 '16 at 22:19
Mentioning your own deadlines is not the best approach since it will turn potential answerers away. `localStorage` is a very simple API. Try it out. — Ruan Mendes, Jun 07 '16 at 22:19
http://stackoverflow.com/questions/13509089/passing-data-from-one-web-page-to-another?lq=1 or submit a GET form and access the querystring on your target — le_m, Jun 07 '16 at 22:20
Possible duplicate of [How to pass javascript object from one page to other](http://stackoverflow.com/questions/7709289/how-to-pass-javascript-object-from-one-page-to-other) — le_m, Jun 07 '16 at 22:23
You could also use `location.hash` for this - https://stackoverflow.com/questions/13509089/passing-data-from-one-web-page-to-another/66557503#66557503 — tonethar, Dec 14 '21 at 12:40

score 3 · Accepted Answer · answered Jun 07 '16 at 22:32

Here's an example using basic HTML and querystring manipulation without using localStorage or sessionStorage, although these are actually very simple APIs and worth looking into.

HTML1 (sender):

This page will get the string representation of an object and then escape its content for transport in the query string.

<script>
var obj = { givenName: 'John', familyName: 'Doe', age: 45 };
console.log(obj);
function passToNextPage() {
    window.location = 'test2.html?' + escape(JSON.stringify(obj));
}
</script>
<button onclick="passToNextPage();">Pass</button>

HTML2 (receiver):

This page unescapes the querystring and then parses the JSON text as an object, ready for use.

<script>
    var json = location.search.substring(1);
    json = unescape(json);
    var obj = JSON.parse(json);
    console.log(obj);
</script>

score 1 · Answer 2 · answered Jun 07 '16 at 22:24

Localstorage is very simple - go for it. Only catch is that it saves the data on the user's own computer so it is (a) not available to other users, and (b) able to be seen with the right tools.

Another option, though, is to use a <form> - that's what they're for.

page1.html

<form action="page2.html" action="get">
    Name: <input name="thename" type="text" /><br>
    <input type="submit" value="Send It" />
</form>

In page2, to get the data from the first page, you can either use PHP (which means your page would be named page2.php and begin with <?php //php code here ?> or with Python or some other backend language.

For more information:

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/Sending_and_retrieving_form_data

From your question, I think Localstorage will be a good option.

Javascript: Is there a simple way to pass data from one webpage to the other?

2 Answers2