将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页面发送到另一个

回答

相关问题