@MauriceNino已经涵盖了几乎所有的技术方法,尽管在某些场景中还有一种。

这不是最好的解决方案,但是如果您的所有页面都是使用带有参数的特定动态url创建的,那么您只需添加一个新参数“v”或“version”=随机登录会话密钥。

为了实现这一点,所有和任何URL(您不想缓存的)都应该与上述参数连接起来。创建一个集中式方法来调用ajax或pages并添加它 version 参数每次登录时,都会创建一个新的唯一参数。如果参数更改,浏览器将始终点击以请求新的请求。

我为您的问题找到的最好的来源是以下博客文章,它以一种连我都能理解的方式解释了缓存: https://jakearchibald.com/2016/caching-best-practices/

TLDR: 不要试图在客户端解决这个问题,让服务器来处理这个问题。 在服务器端添加以下响应头:

Cache-Control: no-cache

this 线程,获取一些更具体的信息,但概括起来:

• 您需要检查登录状态是否已更改

解决方案1)

您需要初始化全局变量,如下所示:

let loginStateChanged = false;

当用户登录或注销时,您将执行以下操作:

loginStateChanged = true;

步骤2

pageshow 类似这样的事件:

window.addEventListener('pageshow', (event) => {
    var isBackNavigation = event.persisted || 
        (typeof window.performance != 'undefined' && window.performance.navigation.type === 2);

    // If the navigation type is a back navigation, and the login
    // State has changed, refresh the window
    if (isBackNavigation && loginStateChanged) {
        window.location.reload(); // reload the page
    }
});

或者使用jQuery;

$(window).on('popstate', () => {
    // If the login State has changed, refresh the window
    if (loginStateChanged) {
        window.location.reload(); // reload the page
    }
});

因为窗口刷新了,所以 loginStateChanged 将重置为其默认值 false .

解决方案2)

或者,如果您需要为多个选项卡实施解决方案:

第一步

改用localStorage和全局变量:

let isLoggedIn = JSON.parse(localStorage.getItem('isLoggedIn')); // Get the initial value
isLoggedIn = isLoggedIn != 'undefined' ? isLoggedIn : false; // If initial value is undefined, set it to false

当用户登录或注销时,您将执行以下操作:

isLoggedIn = /* login: true, logout: false */; // update global variable
localStorage.setItem('isLoggedIn', JSON.stringify(isLoggedIn)); // update localStorage variable

步骤2

window.addEventListener('pageshow', (event) => {
    var isBackNavigation = event.persisted || 
        (typeof window.performance != 'undefined' && window.performance.navigation.type === 2);

    // If the navigation type is a back navigation, and the login 
    // State has changed, refresh the window
    // Here you check, if the localStorage variable is different, than the global variable
    if (isBackNavigation && JSON.parse(localStorage.getItem('isLoggedIn')) != isLoggedIn) {
        window.location.reload(); // reload the page
    }
});

解决方案3)

如果要在任何后退或前进单击时刷新,只需使用以下代码:

window.addEventListener('pageshow', (event) => {
    var isNavigation = event.persisted || 
        (typeof window.performance != 'undefined' && window.performance.navigation.type === 2);
    if (isNavigation) {
        window.location.reload();
    }
});

解决方案3测试文件:

test1.html和test2.html(它们完全相同):

<html>
    <head>
        <title>test</title>
        <script>
            window.addEventListener("pageshow", function ( event ) {
                var isNavigation = event.persisted || 
                    (typeof window.performance != 'undefined' && window.performance.navigation.type === 2);

                console.log("Is navigated through button? ", isBackNavigation);
                if (isNavigation) {
                    alert("reload!");
                    window.location.reload();
                }
            });
        </script>
    </head>
    <a href="test1.html">Test1</a>
    <a href="test2.html">Test2</a>
</html>

它将刷新每个导航操作的整个页面。在打开一个新选项卡时,它将以任何方式重新加载它。