浏览器后退按钮导致隐藏字段出现问题

Question

我遇到了一个有趣的问题，但我不确定如何解决它。我在主页上维护一个隐藏值，用于跟踪页面上加载的事件。事件位置在页面加载后更新。当离开页面然后单击浏览器的后退按钮时，会看到上一个事件编号。如果我单击一个链接并直接加载主页，事件位置将被重置（如预期的那样）

我的HTML：

    <input type="hidden" id="event_num" value="0">

我的 javascript 调用获取/设置 event_num 值：

 function getRecentEvents() {

    var event_pos = $('#event_num').val();
    //console.log("POS: " + event_pos);

    $.getJSON("functions/get_events.php", { f: 'get_events', event_pos: event_pos, limit: limit}, function(data) {

        if (data.events.length > 0) {

            // set the new value        
            $('#event_num').val(data.events_pos);
        }
});

我希望每次加载页面时隐藏字段都是0，无论用户是单击链接还是点击浏览器上的后退按钮。

知道我该如何解决这个问题或者这是一个已知问题吗？

Answer 1

点击“后退”按钮不会再次加载页面，显示缓存的页面内容。也就是说，该页面的状态是您上次访问它时的状态。您可以在

$(document).ready

或文档卸载事件上重置 event_num 计数器，然后您将获得预期的行为。

Answer 2

这是一个老问题，接受的答案是不正确的，至少以今天的标准来看是不正确的。 @Erik A. Brandstadmoen 关于后退缓存的回答是正确的，但是，您不应该使用

unload

事件，因为这很可能会破坏后退缓存。相反，您应该使用

pageshow

/

pagehide

事件。请参阅这篇解释后退缓存的 web.dev 文章：https://web.dev/bfcache