当用户按下后退按钮时，使用 History 对象/javascript 将用户重定向到特定的锚点？

Question

我目前遇到的一个问题是，用户正在浏览一个页面，其中包含一长串项目，其中简要的详细信息都在表格中列出。如果用户想查看有关该项目的更多信息，他们可以单击该链接以在单独的页面上查看特定详细信息。每个标签都有一个唯一的 id 属性。我遇到的问题是，当列表很长（可能 > 100 个项目）时，如果用户想要查看一个项目然后想要单击后退按钮，它会将它们带到上一页的顶部，失去了他们在列表中的位置。

我知道从网站设计的角度来看，用户端有一些解决方案，例如中键单击/在新选项卡中打开（允许表格中的结果数量较少，这样他们就不会遇到问题当他们点击后退按钮时很难找到他们所在的位置）等等。

我尝试使用 History 对象和 javascript，并认为我在某个地方看到了可以替换 LAST 历史记录条目，但我只能找到如何替换 CURRENT 历史记录条目。最终，我要做的是用相同的 url 替换后退按钮通常会将我带到的位置，并将元素的锚点附加到末尾。

即如果用户在 www.website.com/listAllItems 并单击项目的链接以转到 www.website.com/viewItem?itemId=1234，我想将最后一个历史条目更改为 www.website.com /listAllItems#1234 或类似的。

我是否误解了 History 对象的工作原理？我希望能够在不使用库的情况下完成此任务。似乎我已经非常接近解决方案好几次了，但它总是有点偏离。任何帮助将不胜感激！

Answer 1

我只是使用 cookie。我将最后点击的项目的 id 保存在 cookie 中，然后在加载时从 cookie 中获取 id，使用它来查询元素的 dom，然后将焦点设置为它。我也在我的个人项目中使用了 JQuery，所以我将这个答案转换为直接的 JS，因为这个问题被标记为 javascript，我希望我的转换没问题。

function setCookie(cname, cvalue) {
    var d = new Date();
    d.setTime(d.getTime() + (1 * 24 * 60 * 60 * 1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = $.trim(ca[i]);
        if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
    }
    return "";
}

element.attachEvent('onclick', function() {
   setCookie(document.URL + '-lastclick', element.getAttribute('id'))
});

window.onload = function() {
  var elementId = getCookie(document.URL + '-lastclick');
  document.getElementById(elementId).focus();

  // personally i do a .animate({ scrollTop: pos}) to scroll to my object, but you get the gyst.
}