如何将数据从一个页面传递到另一个页面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);

Answer 2

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

Answer 3

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.