Question

所以我在使用HTML和JavaScript。我有两个HTML页面（“people.html”和“profile.html”）和一个JavaScript文件（“people.js”），其中包含一个带有名称列表的对象。每个名称都有自己的ID，如下所示：

var persons = [
{
    "firstName": "Dwight",
    "surName": "Stender",
    "picture": "https://randomuser.me/api/portraits/med/men/99.jpg",
"id": "1"
},
{
    "firstName": "Cole",
    "surName": "Turek",
    "picture": "https://randomuser.me/api/portraits/med/men/66.jpg",
"id": "2"
}]

在第一页上我展示了所有人，当我点击“详细信息”按钮时，它会转到第二页（这是使用handlebars.js完成的），如下所示：

<!-- Use handlebars and javascript to show all people in the object with one script -->
      <script id="users-template" type="text/x-handlebars-template">


        {% raw %}

        {{#each this}}
          <div class="col-md-3">
          <div class="user">
                <img src="{{picture}}" class="profpic"/>
                <h4>{{firstName}} {{surName}}</h4>
                <p><a class="btn btn-default profileLink" id="{{id}}" href="profile.html?id={{id}}" role="button">View details &raquo;</a></p>
          </div>
        </div>
        {{/each}}

        {% endraw %}


      </script>

现在我的问题是，当我点击它时，有没有办法使用JavaScript将ID（我刚刚点击的链接）保存到另一个变量。例如，如果我单击ID为2的配置文件，我可以将该数字2保存到我返回并单击其他ID时自动更新的变量吗？

第二个变量的目的是这样我只能在第二页上显示该特定人的信息。所以我会在第二页上调用该变量并将其与对象ID进行比较，如果ID匹配，我会将该名称打印到屏幕上。

编辑：我发现了为什么你的建议不起作用（我认为）。我相信我遗漏了一条重要信息：我想要存储的ID链接已经在脚本中。当您尝试在另一个脚本中找到某些内容时，localstorage也会工作吗？

Answer 1

您可以使用本地存储来跨页面加载进行持久化。

// IF button click 1
localStorage.setItem('id', 1);
// IF button click 2
localStorage.setItem('id', 2);

console.log(localStorage.getItem('id'))

Answer 2

如果你使用jquery使用下面的代码来获取id

请确保所有链接都有相同的类名。

<!--a class="classOfLink id="1" "href="url">Example headline</a--> 
var clickedId;
  $(".classOfLink").click(function()
     {
        clickedId = $(this).attr("id");// this will give object of current clicked link

     });

您可以稍后将此ID作为url中的参数传递，或根据您的需要更新本地存储中的任何变量，如下所示。

localStorage.setItem('id', clickedId);

如果符合您的要求，请将其标记为答案。

单击链接并将ID保存到变量

2 个答案: