logo标签列表

如何在ReactJS中清除浏览器缓存

javascriptreactjspage-refresh
38
每次我修改我的网站并尝试在运行中的网站上更新这些更改时，我都不得不强制刷新浏览器。是否有任何通过代码实现的方法？
我已经尝试搜索，但大多数说无法实现。 参考帖子：如何以编程方式清空浏览器缓存？ **响应头：
HTTP/1.1 200 OK
Server: nginx/1.12.2
Date: Fri, 06 Jul 2018 10:01:23 GMT
Content-Type: text/html
Transfer-Encoding: chunked
Connection: keep-alive
Vary: Accept-Encoding
Content-Encoding: gzip

**请求头：

GET / HTTP/1.1
Host: --example--.com
Connection: keep-alive
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
Accept-Encoding: gzip, deflate
Accept-Language: en-GB,en-US;q=0.9,en;q=0.8,hi;q=0.7
Cookie: fingerPrint=e4a9037b8f674722f414b0b59d8d663c
2
“运行网站”是指您的生产网站吗？如果是，最好使用一些缓存破坏文件名。参考：https://webpack.js.org/guides/caching/ - Tholle
是的，您可以通过调用一个Ajax页面来获取最后一页的长度，如果有变化，它将自动刷新。 - HamzaNig
你的文件缓存头是什么样子？ - Victor Fernandes
1
创建了一个组件，可以处理应用程序的构建更新。您可以在此处查看：https://www.npmjs.com/package/react-clear-cache - nucab
8个回答
31

在这种特定情况下，你可以通过在<head>标签内使用下面的元标签告诉浏览器不要缓存你的页面。这是一个临时解决方案，对于持久性解决方案，您应该使用API /后端发送适当的头来处理此问题。

<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>

若要使用API / backend来处理此问题，您应该从后端向您的资源发送适当的标头。如果您想暂时禁用缓存，可以通过禁用浏览器缓存来实现。请按照以下步骤操作。

在开发人员工具中，找到网络选项卡并禁用缓存。如下图所示。

enter image description here

希望这能解决问题。

有关缓存的标头： https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching

2
OP正在要求通过代码来完成，当然他是为最终用户提出这个要求。 - pmiranda
1
感谢@pmiranda，我进行了一些编辑。希望这个答案符合提问者的问题。 - Mustkeem K
使用mata no-cache标签会影响性能，使页面加载速度变慢。 - Stanislav
12

对我最有效的解决方案是按照@Wiezalditzijn的建议，清除本地存储和本地缓存。

我创建了一个函数，它在“componentDidMount”中第一时间调用。

此函数检查是否存在本地保存的版本，并且如果它等效于当前版本，则清除所有本地缓存并保存新版本。

import packageJson from “../package.json”;

caching= ()=> {
let version = localStorage.getItem('version');
    if(version!=packageJson.version)
    {
        if('caches' in window){
         caches.keys().then((names) => {
        // Delete all the cache files
        names.forEach(name => {
            caches.delete(name);
        })
    });

    // Makes sure the page reloads. Changes are only visible after you refresh.
    window.location.reload(true);
}

      localStorage.clear();
      localStorage.setItem('version',packageJson.version);
    }
};

更新 2-2-2023

此函数最初可以从"componentDidMount"或"useEffect"中调用。

6
在您的公共文件夹中创建一个名为 style.css 的文件，然后在您的 index.html 文件中链接此 CSS 文件。

示例：

 <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/style.css?v=0.0.1" />

在构建代码之前，始终更新此CSS文件的版本。
5

我写了一个简单的函数来清除缓存。当你想要清除缓存时，只需调用该函数。

它对我有效。*没有在极端情况下进行测试。

你可以通过在客户端保留版本号并让服务器发送版本号来实现它。如果它们不匹配，则调用该函数来清除缓存。或者你可以提供一个按钮给用户，让他们决定是否清除缓存。

export default function emptyCache(){
    if('caches' in window){
    caches.keys().then((names) => {
            // Delete all the cache files
            names.forEach(name => {
                caches.delete(name);
            })
        });

        // Makes sure the page reloads. Changes are only visible after you refresh.
        window.location.reload(true);
    }
}
1
当您在对一大块js文件进行常规构建和发布到生产环境时，最好使用以下npmreact-clear-cache来为您的React应用程序清除缓存。这可以用于根据您的应用程序构建版本配置缓存清除模式。
0
这意味着注销服务工作者，因此仅适用于PWA。 - ana boies
0
创建了一个组件，可以处理应用程序中的构建更新。您可以在此处查看：https://www.npmjs.com/package/react-clear-cache - nucab
你真的想在ReactJS应用程序中添加JQuery吗？我肯定不会这样做。 - devklick
0
为了在浏览器上进行缓存破坏，我们的技巧是保持更新应用程序版本的 meta 文件，这个文件永远不会被缓存... 为了无缝升级，我们在路由更改时执行重新加载，这样用户会感觉自己正在重定向到不同的视图，但实际上我们正在进行应用程序缓存破坏，以从我们部署的构建中获取新的更新。 让我们深入了解如何实现。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接