display javascript function result in another page

Question

good evening all, I want to know how to display the import data from page 1 to the view in page 2 calling the function GetRoute() from input . this is my code : Html page 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 page2 the result will be displayed here in a table in the second page:

     <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>

my function from 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 {

            }
        })
    };

I have to display the result for it to be displayed in the second page, taking the data from the first page . thnaks,

Answer 1

You can use the query string or the hash. Using the hash, you can then remove the hash from the url without refreshing the page. Also, you can use history.replaceState to remove the query string from the url without refreshing.

Here's an example:

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

Use it to get the source.

EDIT:

PAGE 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>

PAGE 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>

Answer 2

You can use HTML5 session o local storage:

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

or

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

depending on how long you want this results to be stored.

Answer 3

we can use a Cookies for store data in it and we can use the data stored with request cookie .