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

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

• javascript
• html

• Are you able to use PHP sessions at all? – Andy Holmes Commented Apr 13, 2016 at 13:24
• 1 @AndyHolmes He says he wants to do it in javascript – Rob Commented Apr 13, 2016 at 13:24
• 1 You could create an array of data objects to pass. [{'key1':'value1','key2':'value2},{'key1':'value1','key2':'value2'}] – Alejandro Iván Commented Apr 13, 2016 at 13:24
• The most common way is URL params( or hash params in SPA). <a href="page.html#key1=value1&key2=value2"> and then in page2, use location.hash to read these values – dinesh ygv Commented Apr 13, 2016 at 13:26
• 1 Possible duplicate of How to pass data from one HTML page to another HTML page using JQuery? – Rob Commented Apr 13, 2016 at 13:26

3 Answers 3

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);

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

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.