javascript - 当用户单击第 1 页上的按钮时，它会将数据发送到第 2 页并重定向到第 3 页

Question

1 - 用户在 page1.php 的文本字段(表单)中输入信息，然后单击提交按钮；

    <Form name="search_form" method="POST" action="page2.php">

    <input type="text" name="search_box" class="btn btn-default" value="" />
    <input type="submit" name="search" class="btn btn-default" value="Search location">
    </form>
    <br>

2 - 用户在 page1.php 中输入的信息被发送到 page2.php，我在其中使用它在数据库中进行查询并将其保存在 xml 文件中。

<?php 

require("phpsqlajax_dbinfo.php");

$dom = new DOMDocument("1.0");
$node = $dom->createElement("markers");
$parnode = $dom->appendChild($node);


$connection=mysql_connect ('localhost', $username, $password);
if (!$connection) {  die('Not connected : ' . mysql_error());}

$db_selected = mysql_select_db($database, $connection);
if (!$db_selected) {
 die ('Can\'t use db : ' . mysql_error());
}

if (isset($_POST['search'])){
$search_term = mysql_real_escape_string($_POST['search_box']);
$query  = "SELECT * FROM markers WHERE area= '{$search_term}' OR county = '{$search_term}' OR name = '{$search_term}' OR road = '{$search_term}' ORDER BY    petrol ASC";
}

$result = mysql_query($query);
if (!$result) {
 die('Invalid query: ' . mysql_error());
}

 header("Content-type: text/xml");

 while ($row = @mysql_fetch_assoc($result)){
 $node = $dom->createElement("marker");
 $newnode = $parnode->appendChild($node);
 $newnode->setAttribute("id",$row['id']);
 $newnode->setAttribute("name",$row['name']);
 $newnode->setAttribute("address",$row['address']);
 $newnode->setAttribute("lat",$row['lat']);
 $newnode->setAttribute("lng",$row['lng']);

}

echo $dom->saveXML();

?>

到目前为止一切都很棒!

现在我需要将用户重定向到 page3.php，其中用户在 page1.php 中输入、过滤并保存在 page2.php 上的信息将加载到 page3.php 上的 map 上。

问题:如果我在 page2.php 中使用 header("Location: page3.php")，用户将被重定向到 page3.php，但来自 page2.php 的查询中的信息似乎不会被执行/保存，并且不会执行/保存t 在 page3.php 上加载。

如果我在 page3.php 的代码中使用另一个 xml 文件，它就可以工作。所以，我得出结论，我的问题出在 page2.php 中。

Page3.php

<script type="text/javascript">


var customIcons = {
  gas_station: {
    icon: '/icon.png'
  },
};

function load() {
  var map = new google.maps.Map(document.getElementById("map"), {
    center: new google.maps.LatLng(53.349535, -6.262184),
    zoom: 10,
    mapTypeId: 'roadmap'
  });
  var infoWindow = new google.maps.InfoWindow;

  // Change this depending on the name of your PHP file
  downloadUrl("page2.php", function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var name = markers[i].getAttribute("name");
      var address = markers[i].getAttribute("address");

      var convenience = markers[i].getAttribute("convenience");
      var atm = markers[i].getAttribute("atm");

    var point = new google.maps.LatLng(
          parseFloat(markers[i].getAttribute("lat")),
          parseFloat(markers[i].getAttribute("lng")));

     var html = "<b>Station: </b>" + name + "<br/><b>Address: </b>" + address;

      var icon = customIcons[type] || {};
      var marker = new google.maps.Marker({
        map: map,
        position: point,
        icon: icon.icon
      });
      bindInfoWindow(marker, map, infoWindow, html);
    }
  });
}

function bindInfoWindow(marker, map, infoWindow, html) {
  google.maps.event.addListener(marker, 'click', function() {
    infoWindow.setContent(html);
    infoWindow.open(map, marker);
  });
}

function downloadUrl(url, callback) {
  var request = window.ActiveXObject ?
      new ActiveXObject('Microsoft.XMLHTTP') :
      new XMLHttpRequest;

  request.onreadystatechange = function() {
    if (request.readyState == 4) {
      request.onreadystatechange = doNothing;
      callback(request, request.status);
    }
  };

  request.open('GET', url, true);
  request.send(null);
 }

  function doNothing() {}

</script>

无论如何，当用户单击 page1.php 中的提交时，信息会发送到 page2.php 并且用户会自动重定向到 page3.php。

提前谢谢您!

Answer 1

以下是使用 localStorage 的非常基本的实现:

Fiddle .

注意:Stackoverflow 不允许访问 localStorage，因此请在 JSFiddle 上进行测试。

function saveToLocalStorage() {
    var value = document.getElementById("txt").value;
    console.log(value);
    localStorage.setItem("myValue", value);
}

function getFromLocalStorage(){
	console.log(localStorage.getItem("myValue"));
}

<input type="text" id="txt">
<button onclick="saveToLocalStorage()">Save</button>
<button onclick="getFromLocalStorage()">Get</button>