javacript関数の結果を別のページに表示

Question

おはようございます、 1ページから2ページ目のビューにインポートデータを表示する方法を知りたい場合は、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 PAGE2 結果は2ページ目の表にここに表示されます：JavaScriptから

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

私の機能：

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 { 

      } 
     }) 
    }; 

最初のページからデータを取得して、2番目のページに表示するための結果を表示する必要があります。 thnaks、

Answer 1

クエリ文字列またはハッシュを使用できます。ハッシュを使用すると、ページを更新せずにURLからハッシュを削除できます。また、history.replaceStateを使用して、URLからクエリー文字列を削除して、リフレッシュせずに削除できます。ここで

は例です：

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

はソースを取得するために使用します。

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

我々はそれにデータを格納するためにクッキーを使用することができますし、我々が要求クッキーで保存されたデータを使用することができます。

Answer 3

ローカルストレージO HTML5セッションを使用することができます：あなたは、これが保存されるようになりたいどのくらいに応じて、

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

または

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

を。