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

Question

大家晚上好， 我想知道如何从 input 调用函数 GetRoute() 将第 1 页的导入数据显示到第 2 页的 View 。 这是我的代码: 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 session 或本地存储:

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

或

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

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