在另一个页面中显示 javascript 函数结果

Question

大家晚上好， 我想知道如何从第 1 页显示导入数据到第 2 页中的视图，从 input 调用函数 GetRoute() 。 这是我的代码： html第1页：

<div> Add Destination</div>
    <div>
        <input id="travelto" type="text" name="name" value="Oving, UK" />
        <input type="button" value="Add" onclick="PushDestination()" />
        <a href="#" onclick="setDestination('Tagmere, UK')">Tagmere, UK. </a>
        <a href="#" onclick="setDestination('Bosham, UK')">Bosham, UK</a>
    </div>
    <div id="destinations"></div><br />
    Source : <input id="travelfrom" type="text" name="name" value="Chichester, UK" />   <br />  <br />

    <input type="button" value="Calculate" onclick="GetRoute()"  />

html页面2 结果将显示在第二页的表格中：

     <div id="dvDistance">
        <table id="tblResults" border="1" cellpadding="10">
            <tr>
                <th> Start </th>
                <th> End </th>
                <th> Distance </th>
                <th> Duration </th>
            </tr>
        </table>

    </div>

我的 javascript 函数：

  function GetRoute() {

        directionsDisplay.setMap(map);

        source = document.getElementById("travelfrom").value;
        destination = document.getElementById("travelto").value;

        var waypoints = [];
        for (var i = 0; i < locations.length; i++) {
            var address = locations[i];
            if (address !== "") {
                waypoints.push({
                    location: address,
                    stopover: true
                });
            }
        }

        var request = {
            origin: source,
            destination: waypoints[0].location,
            waypoints: waypoints, //an array of waypoints
            optimizeWaypoints: true, //set to true if you want google to determine the shortest route or false to use the order specified.
            travelMode: google.maps.DirectionsTravelMode.DRIVING
        };

        directionsService.route(request, function (response, status) {
            if (status == google.maps.DirectionsStatus.OK) {
                var dvDistance = document.getElementById("dvDistance");
                var distance = 0;
                var minute = 0.00;
                response.routes[0].legs.forEach(function (item, index) {
                    if (index < response.routes[0].legs.length - 1) {
                        distance = distance + parseInt(item.distance.text);

                        minute = parseFloat(minute) + parseFloat(item.duration.value / 60);




                             tbl = document.getElementById("tblResults");

                                var row = tbl.insertRow(1);
                                var cell = row.insertCell(0);
                                cell.innerText = source;
                                var cell = row.insertCell(1);
                                cell.innerText = item.end_address;
                                var cell = row.insertCell(2);
                                cell.innerText = distance;
                                var cell = row.insertCell(3);
                                cell.innerText = minute.toFixed(2) + " min";


                    }
                });
                directionsDisplay.setDirections(response);
            }
            else {

            }
        })
    };

我必须显示结果才能显示在第二页，从第一页获取数据。 谢谢，

Answer 1

您可以使用 HTML5 会话或本地存储：

sessionStorage.getItem('label')
sessionStorage.setItem('label', 'value')

或

localStorage.getItem('label')
localStorage.setItem('label', 'value')

取决于您希望此结果存储多长时间。

Answer 2

我们可以使用 Cookies 在其中存储数据，也可以使用请求 cookie 存储的数据。

Answer 3

您可以使用查询字符串或哈希。使用哈希，您可以从 url 中删除哈希，而无需刷新页面。另外，您可以使用history.replaceState从url中删除查询字符串而不刷新。

这是一个例子：

http://id0t.x10.mx/StackOverflow/demo2a.html

用它来获取源代码。

编辑：

第 1 页

<textarea onchange="sendres(myFunc(this.value),'/StackOverflow/demo2b.html');" placeholder="type in me and press enter (or click out of me) to submit!"></textarea>
<script>
function sendres(callback,url){
  window.location.href=url+"?"+encodeURIComponent(callback);
}
function myFunc(text){
  return text;
}
</script>

第 2 页

<script>
window.onload=function(){
  if((window.location.search.length==0)||(window.location.search.length==1)){
    //no query string
    document.getElementById("msg").style.display="none";
    return;
  }else{
    res = decodeURIComponent(window.location.search.substr(1));
    var url = window.location.origin+window.location.pathname;
    history.replaceState({urlPath:url},"",url);
  }
  alert(res);
}
</script>
<span id="msg">Now, look at the URL. See how it has no query string?<br><button onclick="document.body.parentElement.innerHTML=atob();">Source</button></span>
<button onclick="window.location='/StackOverflow/demo2a.html';">to part 1</button>