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

Answer 1

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