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

IT技术 javascript reactjs page-refresh
2021-05-25 13:18:03

每次我对我的网站进行更改并尝试将这些更改更新到正在运行的网站时，我都必须硬刷新浏览器。有没有办法通过代码来做到这一点

我已经尝试搜索它，但大多数人说它无法完成。参考帖子：如何以编程方式清空浏览器缓存？

**响应头：

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
4个回答

对于这种特定情况，您可以通过在标签内使用这些元标签来告诉浏览器不要缓存您的页面<head>：

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

然而，有多种方法可以实现这一点。您可以从后端发送带有资源的适当标头。或者，如果您尝试暂时禁用缓存，则可以通过禁用浏览器缓存来实现。为此，请按照以下步骤操作。

在您的开发人员工具中。找到网络选项卡并禁用缓存。就像图片中的这里。

在此处输入图片说明

希望这能解决。

在您的公共文件夹中创建一个style.css文件，然后将该 CSS 文件链接到您的index.html 文件中。

前任：

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

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

我做了一个简单的函数来删除缓存。当您想清除缓存时，只需调用此函数即可。

这个对我有用。*未在边缘情况下对其进行测试。

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

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

对我有用的最佳解决方案是清除我的本地存储以及@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);
    }
};
其它你可能感兴趣的问题
上一篇React Typescript - 类型参数不可分配给类型参数 下一篇Cura 4.4 缺少对象部分