How to pass data from one page to another page html

Question

I have a page1.html which contains set of data

{'key1':'value1','key2':'value2','key3':'value3'}

and a link

<a target='_blank' href='page2.html'>Click To Navigate</a>

which will navigate to page2.html.

I would like to ask how can I pass all the data above in page1.html to page2.html so that I can use them in page2.html.

What I tried to use is localStorage, but I can store only 1 set of data at a time, so if in my page1.html have many set of data, same key but different value they will be overlapped when I store them in localStorage, then I can not pass all these set of data to the page2.html.

Anyone got an idea? Thank you so much

You could create an array of data objects to pass. `[{'key1':'value1','key2':'value2},{'key1':'value1','key2':'value2'}]` — Alejandro Iván, Apr 13 '16 at 13:24
The most common way is URL params( or hash params in SPA). and then in page2, use location.hash to read these values — dinesh ygv, Apr 13 '16 at 13:26
You could temporary store them in a cookie.. https://github.com/js-cookie/js-cookie — JVE, Apr 13 '16 at 13:26
Possible duplicate of [How to pass data from one HTML page to another HTML page using JQuery?](http://stackoverflow.com/questions/11508818/how-to-pass-data-from-one-html-page-to-another-html-page-using-jquery) — Rob, Apr 13 '16 at 13:26
@Rob he didn't say he's using jQuery, this looks more like vanilla js. — Alejandro Iván, Apr 13 '16 at 13:27
@AlejandroIván There are several related answers using vanilla js on SO he should search for. This one was more direct. — Rob, Apr 13 '16 at 13:29
Does this answer your question? [Transfer data from one HTML file to another](https://stackoverflow.com/questions/17502071/transfer-data-from-one-html-file-to-another) — L.Lauenburg, Apr 28 '22 at 20:42

score 14 · Accepted Answer · answered Apr 13 '16 at 13:36

You can do it using Javascript, there's no restriction of which kind of object you can pass. For instance, if you have several key-value objects:

var firstData = {
    'key1' : 'value1',
    'key2' : 'value2'
};

and

var secondData = {
    'key1' : 'value3',
    'key2' : 'value4'
};

you could enclose them using a Javascript array:

// This is on page1.html
var myData = [ firstData, secondData ];

and pass that array using localStorage.

Javascript on page1.html

// Set the variable
localStorage.setItem( 'objectToPass', myData );

Javascript on page2.html

// Get the variable
var myData = localStorage['objectToPass'];
localStorage.removeItem( 'objectToPass' ); // Clear the localStorage
var firstData = myData[0];
var secondData = myData[1];
alert('firstData: ' + firstData + '\nsecondData: ' + secondData);

score 2 · Answer 2 · answered Apr 13 '16 at 13:29

If you want to use javascript to do this, you can do the following (explains it really well) - https://www.boutell.com/newfaq/creating/scriptpass.html

Also, you can use HTML5 to pass objects from a page to another page of your choise. In order to do this, you would create a session like this:

sessionStorage.setItem('key', 'value');

And then to read the session you would do this:

sessionStorage.getItem('key');

This is a really good example on a webpage on how this can be achieved:http://demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/sample-09-sessionstorage-demo.html

score 2 · Answer 3 · answered Sep 01 '19 at 08:52

You can use the localstorage with JSON method (JSON.parse) to parse a JSON string and construct the JavaScript value or object described by the string. The reverse operation is accomplished by the other method (JSON.stringify) to convert a JavaScript object or value to a JSON string.

javascript on the first page:

var data = {'key1':'value1','key2':'value2','key3':'value3'};
localStorage.setItem("object_name",JSON.stringify(data));

javascript on the second page.

var data = localStorage.getItem("object_name");
localStorage.clear(); //clean the localstorage
var value1 = JSON.parse(data).key1;
var value2 = JSON.parse(data).key2;

So now value1 and value2 in the second page contain the value of value1 and value2 of the first page.

How to pass data from one page to another page html

3 Answers3

Linked

Related