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

有人有想法吗？ 太感谢了

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

Answer 2

如果您想使用 javascript 来执行此操作，您可以执行以下操作（解释得非常好） - https://www.boutell.com/newfaq/creating/scriptpass.html

此外，您可以使用 HTML5 将对象从一个页面传递到您选择的另一个页面。 为此，您将创建一个这样的会话：

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

然后要阅读会话，您将执行以下操作：

sessionStorage.getItem('key');

这是关于如何实现这一点的网页上的一个非常好的示例：http: //demos.w3avenue.com/html5-unleashed-tips-tricks-and-techniques/sample-09-sessionstorage-demo.html

Answer 3

您可以使用带有 JSON 方法 ( JSON.parse ) 的 localstorage 来解析 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 的值。