将javascript变量传递到下一页而不会受到服务器端的干扰？

Question

我正在用PhoneGap制作一个Web应用程序。 这是我目前的障碍：

在第一页上，用户选择纬度和经度，然后点击继续。 通过在表单上执行一些不错的GET操作，并在下一页上使用javascript URL解析器，可以将下一页的经纬度坐标传递给下一页。 在此新页面上，要求用户输入半径。 通过相同的方法，半径将传递到最终页面，该页面将显示一个Google地图，上面有一个由坐标和半径组成的圆。

但是问题是，当我将半径传递到最后一页时，显然它仅传递了半径。 如何从第二页开始传递经纬度和经度，而这不是表格信息的一部分？ 他们已经建立。 我知道显而易见的解决方案是将所有三个变量放在一页上，但是出于愚蠢的原因，超出了我的控制范围，必须采用这种方式。

所以问题就来了：如何将JavaScript中作为变量存在的信息传递给下一页？ 它不是表格的一部分。 只是一个变量。

Answer 1

您需要做的就是在表单中添加几个隐藏的输入元素（ <input type="hidden" /> ）。

这可以通过多种方式完成。 最短的是使用一个库（示例代码碰巧是jQuery）：

$('<input type="hidden" name="lat" />').val(latitudeValue).appendTo(formSelector);
$('<input type="hidden" name="lng" />').val(longitudeValue).appendTo(formSelector);

原始JS稍长一些，但并不特别复杂：

//I haven't checked this, so some cross-browser tweaking might be necessary
var lat,
    lng,
    form;
lat = document.createElement('input');
lat.type = 'hidden';
lat.value = latitudeValue;
lng = document.createElement('input');
lng.type = 'hidden';
lng.value = longitudeValue;
form = document.querySelector(formSelector);
form.appendChild(lat);
form.appendChild(lng);

latitudeValue ， longitudeValue和formSelector是必须在页面上下文中定义的变量。 您可能还会使用其他参数名称，例如name="longitude" 。

---

听起来您确实应该使用AJAX来更改页面的内容，这样就不会发出连续的GET请求。 相反，您可以简单地交换页面的主要内容，具体取决于用户所处过程的哪一步。 它将消除进行任何URL解析的必要性（这很容易错误地进行）。

Answer 2

您可以使用Javascript访问获取数据。 因此，只需将数据作为URL中的数据传递到下一页，并使用Javascript对其进行解析。

如果您的网址末尾包含?foo=1&bar=2 ，则可以使用以下命令解析foo和bar

var parts = window.location.search.substr(1).split("&");
var $_GET = {};
for (var i = 0; i < parts.length; i++) {
    var temp = parts[i].split("=");
    $_GET[decodeURIComponent(temp[0])] = decodeURIComponent(temp[1]);
}

alert($_GET['foo']); // 1
alert($_GET.bar);    // 2

Answer 3

最简单的选择是使用Javascript / jQuery创建cookie并将其添加值。 因此，您可以在每个页面上添加所有值，然后最终仅从cookie中检索所需的数据。 您无需使用服务器端脚本，但可以获得所需的所有值。