Question

就像这个javascript如何获取信息并将其吐入textarea。我需要在不同的网页上这样做。我需要将信息发送到一个网页（Orderpage.html），上面有一个简单的textarea。这就是我所做的，所以信息会在同一页面上提交给textarea。我想要它，所以当用户点击完成订单时，他们会被带到该网页上并带有信息。

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>

Answer 1

在这种情况下，您正在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)对其进行解码。

现在，您可以将字符串化数据推送到查询字符串中，但我建议使用会话存储来在页面之间传输大数据。这使您的URL看起来更整洁，并使用户无法编辑查询字符串中的数据。在“来源”页面上，您需要这样的内容：

sessionStorage.setItem("shirtData", JSON.stringify(data));

这将“数据”对象（无论它是什么）存储在会话存储中，作为名称为“shirtData”的字符串。 “目标”页面将需要此代码：

var shirt = JSON.parse(sessionStorage.getItem("shirtData"));

这将检索相同的字符串数据，然后将其转换回对象。我相信，根据您的示例，这些将分别在您的源页面的提交事件（或onclick用于用户用来表示已完成的任何按钮）和目标上的DOM Ready事件中。 / p>

现在，这里有一个细节需要注意。由于您已经对存储内容的项目的名称进行了硬编码，因此第二次运行将覆盖您在首次运行时保存的数据。我在构建报表查看器时遇到了这个问题 - 用户可以输入报表设置并打开报表（调用Destination1），然后更改设置并打开Destination2。如果他们然后重新加载Destination1，它将使用保存的最后设置 - 属于Destination2的设置。您可以通过生成随机ID（例如GUID）并将其附加到会话存储名称，然后将查询字符串中的ID传递到目标页面来解决此问题。

还要注意，只要浏览器关闭，会话存储就会消失。如果您需要存储比这更长的东西，您需要将其放入cookie中。另请注意，会话存储不安全，不应用于存储任何敏感内容。

我怎么能把这些信息发送到另一个页面上的另一个textarea？

1 个答案: