就像这个 javascript 如何获取信息并将其吐入文本区域一样。我需要在不同的网页上执行此操作。我需要将信息发送到带有简单文本区域的网页(Orderpage.html)。这就是我所做的，以便将信息提交到同一页面上的文本区域。我希望这样当用户单击“完成订单”时，他们就会被带到包含该信息的网页。
function addShirt()
{
{
document.getElementById("order").value += "You ordered " + document.getElementById("shirtQuantity").value;
}
{
document.getElementById("order").value += " " + document.getElementById("shirtColor").value;
}
if (document.getElementById("smallSize").checked)
{
document.getElementById("order").value += ", small shirt(s)";
}
if (document.getElementById("mediumSize").checked)
{
document.getElementById("order").value += ", medium shirt(s)";
}
else if (document.getElementById("largeSize").checked)
{
document.getElementById("order").value += ", large shirt(s)";
}
if (document.getElementById("giftWrap").checked)
{
document.getElementById("order").value += " to be gift wrapped and delivered." + "\n";
}
else
{
document.getElementById("order").value += " to be delivered." + "\n";
}
}
<html>
<head>
<title>Shirts</title>
<script type="text/javascript" language="javascript" src="javascript.js">
</script>
</head>
<body>
<form id="shirtInfo">
<select id="shirtColor">
<option value="White">White</option>
<option value="Black">Black</option>
<option value="Grey">Grey</option>
</select>
<br />
<input type="text" id="shirtQuantity" value=""><br />
<input type="radio" name="size" id="smallSize" value="small" checked="checked">Small<br />
<input type="radio" name="size" id="mediumSize" value="medium" checked="checked">Medium<br />
<input type="radio" name="size" id="largeSize" value="large" checked="checked">Large<br />
<input type="checkbox" id="giftWrap" value="">Giftwrap?<br />
<textarea id="order" rows="15" cols="50">
</textarea><br />
<input type="button" name="send" value="Add to Cart" onClick="addShirt()"><br />
<input type="button" name="complete" value="Complete Order" onClick=""> <br>
<a href="pants.html">Pants</a><br />
<a href="hats.html">Hats</a><br />
<a href="orderpage.html">Order Page</a>
</body>
</html>
最佳答案
在本例中，您将在 document.getElementById("order") 控件中构建一个字符串，但由于您要转到另一个页面，因此没有必要这样做。只需将其构建在变量中即可。我们称之为“数据”。
var data;
data += "You ordered " + document.getElementById("shirtQuantity").value;
等等。但是，我会将将所有这些值转换为友好文本的代码放在目标页面上。现在，我们只需要存储我们想要在页面之间发送的数据:
var data;
data.quantity = document.getElementById("shirtQuantity").value;
等等。请注意，您不必提前定义属性 - js 将接受点符号并在数据对象中创建新属性。如果您的信息本质上更加表格化，您还可以将数据对象构建为数组。这对于我们的目的来说并不重要。
将数据包装在一个漂亮、整洁的包中后，您需要对该对象进行字符串化，以便将其传递到目标页面。为此，您可以通过 JSON.stringify(data) 运行该数据对象。在目标页面上，您可以使用 JSON.parse(data) 对其进行解码。
现在，您可以将字符串化数据放入查询字符串中，但我建议使用 session 存储来在页面之间传输大型数据。这使您的 URL 看起来更整洁，并使用户无法编辑查询字符串中的数据。在“源”页面上，您需要这样的内容:
sessionStorage.setItem("shirtData", JSON.stringify(data));
这会将“数据”对象(无论它是什么)作为字符串存储在 session 存储中，名称为“shirtData”。 “目标”页面将需要以下代码:
var shirt = JSON.parse(sessionStorage.getItem("shirtData"));
这会检索相同的字符串数据，然后将其转换回对象。我相信，根据您的示例，这些将进入源页面的提交事件(或用户用来指示完成的任何按钮的 onclick )和目标上的 DOM Ready 事件，分别。
现在，这里有一个细节需要注意。由于您已经对要存储内容的项目的名称进行了硬编码，因此第二次运行将覆盖您在第一次运行时保存的数据。当我构建报表查看器时，我确实遇到了这个问题 - 用户可以输入报表设置并打开报表(称为 Destination1)，然后更改设置并打开 Destination2。如果他们随后重新加载 Destination1，它将使用最后保存的设置 - 属于 Destination2 的设置。您可以通过生成随机 ID(例如 GUID)并将其附加到 session 存储名称，然后将查询字符串中的 ID 传递到目标页面来克服此问题。
另请注意，只要浏览器关闭， session 存储就会消失。如果您需要存储比这更长的内容，则需要将其放入 cookie 中。另请注意， session 存储并不安全，不应用于存储任何敏感内容。
关于javascript - 我如何将此信息发送到不同页面上的另一个文本区域？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30603709/