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

【问题标题】：How to pass data from one page to another page html如何将数据从一个页面传递到另一个页面html
【发布时间】：2020-06-18 00:56:20
【问题描述】：

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

有人有想法吗？非常感谢

【问题讨论】：

你能使用 PHP 会话吗？
@AndyHolmes 他说他想用javascript来做
你可以创建一个数据对象数组来传递。 [{'key1':'value1','key2':'value2},{'key1':'value1','key2':'value2'}]
最常见的方式是 URL 参数（或 SPA 中的哈希参数）。然后在page2中，使用location.hash来读取这些值
How to pass data from one HTML page to another HTML page using JQuery?的可能重复

标签： javascript html

【解决方案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);

【讨论】：

【解决方案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

【讨论】：

【解决方案3】：

您可以使用带有 JSON 方法的 localstorage (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 的值。

【讨论】：