將JS對象從一個HTML頁面發送到另一個

我有一個主要的網站與檢索爲從背服務JSON員工列表。我使用Handlebars引擎進行模板化，看起來如下所示。

JSON

[{"FirstName":"Tom","LastName":"Stephens","BirthPlace":"London","Gender":"M","OIB":"12345678901","CurrentPlace":"Berkeley","Department":"21510"}, 
{"FirstName":"Abigail","LastName":"Ybarra","BirthPlace":"Miami","Gender":"F","OIB":"12345678902","CurrentPlace":"Los Angeles","Department":"21540"}, 
{"FirstName":"Kim","LastName":"Kardashian","BirthPlace":"New York","Gender":"F","OIB":"12345678903","CurrentPlace":"Boston","Department":"UNKNOWN"}, 
{"FirstName":"David","LastName":"Beckham","BirthPlace":"London","Gender":"M","OIB":"12345678904","CurrentPlace":"Manchester","Department":"UNKNOWN"}, 
{"FirstName":"Zlatan","LastName":"Ibrahimovic","BirthPlace":"Stockholm","Gender":"M","OIB":"12345678905","CurrentPlace":"Zenica","Department":"21540"}]

的index.html

<script id="employees-template" type="text/x-handlebars-template"> 
<ul> 
    {{#each employees}} 
     <li>{{FirstName}}</li> <!-- use URL to a details website instead of FirstName --> 
    {{/each}} 
</ul> 
</script>

員工的名單正在上點擊一個按鈕，它的定義如下牽強。

main.js

// on-click listener 
    $("#btn-show").click(function(e) { 
     // AJAX call on button clicked 
     $.ajax({ 
      type: "GET", 
      dataType: "json", 
      url: "http://127.0.0.1:8080/api/employee/", 
      error: function (xhr) { 
       console.log(xhr.statusText); 
      } 
     }).done(function(data) { 
      // render data to html template 
      var html = template({employees : data}); 
      $("#render-here").html(html); 
     }); 
    });

的工作方式就像這樣：一個按鈕被按下時，員工姓名列表呈現。

現在，我想要實現的是，這些名稱中的每一個實際上都是一個URL，它會導致包含關於特定員工的所有詳細信息的頁面。例如，如果用戶點擊列表中的URL「Tom」，則應打開包含名字，姓氏，出生地點，當前地點等的關於湯姆的所有細節的新HTML頁面。這個簡單的頁面可以被稱爲employee.html。

employee.html

<html> 
    <head> 
    </head> 

    <body> 

     <p> 
      Firstname: {{FirstName}} 
     </p> 

     <p> 
      LastName: {{LastName}} 
     </p> 

     <p> 
      CurrentPlace: {{CurrentPlace}} 
     </p> 

     <p> 
      BirthPlace: {{BirthPlace}} 
     </p> 

     <p> 
      Gender: {{Gender}} 
     </p> 

     <p> 
      Department: {{Department}} 
     </p> 

    </body> 

</html>

現在的問題是我怎麼能發送特定員工的所有細節，從我main.html頁面到一個特定頁面employee.html（點擊特定員工的URL時上）？

我明白我可以通過URL傳遞的所有參數，但似乎真的很醜迫使用戶看到這種不必要的詳細網址。

有一些更好的選擇？

來源

2017-09-15 wesleyy

您可以將數據串聯起來並[將其添加到localStorage]（https://developer.mozilla.org/en/docs/Web/API/Window/localStorage）。注意：有大小限制。 – Andy

我相信你正在使用angularjs。爲什麼不利用服務。 – Hacker

你可以將它保存到localStorage和詳細信息頁面上檢索本地存儲的員工信息

你必須字符串化JSON的，因此它可以被設置爲本地存儲（本地存儲不僅節省了字符串），和然後將其設置爲一個變量在本地存儲這樣

localStorage["employees"] = JSON.stringify(json);

，並檢索它使用Parse到收杆JSON來和JS對象弗朗串這樣

var employees = JSON.parse(localStorage["employees"]);

欲瞭解更多有關localStorage的信息，請查看localStorage - MDN。

來源

2017-09-15 14:42:32

這將是值得的，同時擴大你的答案，或許解釋你如何從本地存儲添加和檢索。 – Andy

確定生病做簡單，你也可以使用鏈接MDN更多信息 –

只是修正了幾個錯別字。希望你不介意。 – Andy

使用 localStorage.setItem("employerList", JSON.stringify(employerData))在主頁面和在deail頁面使用var data = JSONparse(localStorage.getItem("employerList"))並讓你在數據變量json。

來源

2017-09-15 14:49:12

將JS對象從一個HTML頁面發送到另一個

回答

相關問題