将 JS 对象从一个 HTML 页面发送到另一个答案

【问题标题】：Send JS object from one HTML page to another将 JS 对象从一个 HTML 页面发送到另一个
【发布时间】：2017-09-15 22:54:32
【问题描述】：

我的场景如下。

我有一个主网站，其中包含从支持服务检索为 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 指向一个页面，其中包含有关特定员工的所有详细信息。

例如，如果用户单击列表中的 URL“Tom”，则应打开一个新的 HTML 页面，其中包含有关 Tom 的所有详细信息，包括 FirstName、LastName、BirthPlace、CurrentPlace 等。这个简单的页面可以叫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 传递所有参数，但是强迫用户看到这个不必要的详细 URL 似乎真的很难看。

还有更好的选择吗？

【问题讨论】：

您可以对数据和add it to localStorage 进行字符串化。注意：有大小限制。
我相信你正在使用 angularjs。为什么不使用服务。

标签： javascript jquery html json

【解决方案1】：

您可以将其保存到localStorage 并在详细信息页面上从本地存储中检索员工信息

您必须将Json字符串化，以便将其设置为本地存储（本地存储仅保存字符串），然后将其设置为本地存储中的变量，如下所示

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

要检索它，请使用Parse 将 Json 解析为像这样的字符串中的 JS 对象

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

有关 localStorage 的更多信息，请查看localStorage - MDN。

【讨论】：

@DavidGenger 使用这种方法，我如何知道哪个 URL 触发了新的 HTML 页面？我需要确切知道用户点击了哪个员工，以便显示该用户的详细信息。如果有人单击 index.html 上的“Tom”，则employee.html 必须知道单击了“Tom”。该怎么做？
@wesleyy 您应该在 URL 中将员工的 id 作为参数传递，并在 JavaScript 中选择与该 ID 匹配的员工，或者您也可以在新的本地传递 ID存储键，并在用户每次单击列表时替换该值。我认为第一种方法更可取，因此您可以从 URL 直接链接到用户

【解决方案2】：

使用主页中的localStorage.setItem("employerList", JSON.stringify(employerData)) 和deail 页面中的var data = JSONparse(localStorage.getItem("employerList")) 并在数据变量中获取json。

【讨论】：