javascript 如何清除reactjs中的浏览器缓存

iyfjxgzm 于 2023-02-02 发布在 Java

关注(0)|答案(8)|浏览(407)

每一次我做更改到我的网站，并试图更新这些变化到运行的网站，我必须硬刷新浏览器.有任何方法做它的代码
我已经试着搜索它，但大多数说它不能做到。参考帖子：How to programmatically empty browser cache?

**响应标题：

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

JavaScript

来源：https://stackoverflow.com/questions/51207570/how-to-clear-browser-cache-in-reactjs

8条答案

按热度按时间

dpiehjr41#

对于这种特殊情况，您可以做的是告诉浏览器不要缓存您的页面，通过在<head>标签内使用以下 meta标签：这是一个临时的解决方案，对于永久的解决方案，您应该使用API/后端发送的适当的头文件来处理它。

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

要使用API/backend来处理这个问题，您应该从后端发送相应的头文件和资源。同样，如果您试图暂时禁用缓存，您可以通过禁用浏览器缓存来实现。要做到这一点，请遵循以下步骤。
在你的开发者工具中.找到网络标签并禁用缓存.如图所示.

希望这能解决。
用于缓存的标头：https://developer.mozilla.org/en-US/docs/Web/HTTP/Caching

赞(0）回复(0）举报 2023-02-02

rqmkfv5c2#

对我来说，最好的解决方案是按照@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);
    }
};

更新****2023年2月2日

此函数最初可在“componentDidMount”或“useEffect”中调用

赞(0）回复(0）举报 2023-02-02

z0qdvdin3#

在公共文件夹中创建一个style. css文件，然后将此CSS文件链接到index. html文件中。
例如：

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

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

赞(0）回复(0）举报 2023-02-02

x6h2sr284#

我做了一个简单的函数来移除该高速缓存。当你想清除缓存的时候就调用这个函数。
它对我很有效。* 没有在边缘情况下测试它。
你可以在客户端保留一个版本号，让服务器发送一个版本号，如果不匹配，调用函数来移除该高速缓存，或者你可以给用户一个按钮，让他们决定移除缓存。

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);
    }
}

赞(0）回复(0）举报 2023-02-02

wf82jlnq5#

当你使用大量js文件进行常规构建并发布到PROD环境时，最好对你的react应用程序使用下面的npm react-clear-cache。这可以用来根据你的应用程序构建版本配置该高速缓存清除模式。

赞(0）回复(0）举报 2023-02-02

sg2wtvxw6#

这是可能的，你可以简单地使用jQuery.请看后How to programmatically empty browser cache?

赞(0）回复(0）举报 2023-02-02

t3psigkw7#

即使下面的答案不起作用。你面临着一个问题，比如你的应用程序被缓存，使整个应用程序显示一个旧的版本，那么你可能可以检查这个链接https://github.com/facebook/create-react-app/issues/1910#issuecomment-355245212。之后做一个npm启动，它对我很有效。

赞(0）回复(0）举报 2023-02-02

dauxcl2d8#

要在浏览器上缓存崩溃，诀窍是我们不断更新meta文件中的应用程序版本，该文件从未被缓存......为了无缝升级，我们在路径更改时执行重新加载，以便用户感觉好像他们正在重定向到不同的视图，但在我们的例子中，我们实际上是缓存破坏我们的应用程序，以便从我们部署的build获得新的更新。
Let's dig in to see how its possible.

赞(0）回复(0）举报 2023-02-02

我来回答

javascript 如何清除reactjs中的浏览器缓存

8条答案

相关问题

热门标签

最新问答