如何将数据从一个页面传递到另一个html

Question

我有一个包含数据集的 page1.html

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

和一个链接

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

它将导航到 page2.html 。

我想问一下如何将 page1.html 中的所有数据传递给 page2.html 以便我可以在 page2.html 中使用它们。

我尝试使用的是 localStorage ，但我一次只能存储一组数据，所以如果在我的 page1.html 中有许多数据集，相同的键但不同的值当我将它们存储在 localStorage 中时会重叠，然后我无法将所有这些数据集传递给 page2.html 。

有人知道吗？太感谢了

原文由 Ock 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以使用 Javascript 来完成，对您可以传递的对象类型没有限制。例如，如果您有多个键值对象：

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

和

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

您可以使用 Javascript 数组将它们括起来：

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

并使用 localStorage 传递该数组。

page1.html 上的 Javascript

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

page2.html 上的 Javascript

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

原文由 Alejandro Iván 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以使用 localstorage with JSON 方法 ( JSON.parse ) 来解析 JSON 字符串并构造字符串描述的 JavaScript 值或对象。反向操作由另一个方法 ( JSON.stringify ) 完成，将 JavaScript 对象或值转换为 JSON 字符串。

第一页上的javascript：

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

第二页上的javascript。

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

所以现在第二页的value1和value2包含了第一页的value1和value2的值。

原文由 Loich 发布，翻译遵循 CC BY-SA 4.0 许可协议