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

How to pass data from one page to another page html

本文关键字：html 另一个 一个 数据      更新时间：2024-06-24

我有一个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。

有人有主意吗？非常感谢

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

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

和

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

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

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

并使用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);

如果您想使用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

您可以使用带有JSON方法的localstorage（JSON.parse）来解析JSON字符串，并构造该字符串所描述的JavaScript值或对象。反向操作由另一种方法（JSON.stringfy）完成，将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的值。

相关文章：