我正在开发一个 Angular 17 项目，需要模拟浏览器提供的“清空缓存和硬重载”功能。本质上，我想强制完全刷新应用程序，清除所有缓存的文件并从服务器获取新资源。
我知道浏览器内置了此功能，但我需要在我的 Angular 应用程序中以编程方式实现此行为，而不依赖于浏览器设置或配置。
有人可以提供有关如何使用 Angular 17 代码实现此目的的指导或代码片段吗？我正在寻找一种解决方案，确保清除所有缓存的资源，并在触发此操作时从头开始重新加载应用程序。谢谢您的帮助。
emptyCacheAndHardReload(): void {
// // Clear Local Storage
localStorage.clear();
// // Clear Session Storage
sessionStorage.clear();
// // Clear all Cookies
document.cookie.split(";").forEach((cookie) => {
const cookieName = cookie.split("=")[0].trim();
document.cookie = `${cookieName}=;expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
});
// // Force a Hard Reload by appending a random query parameter
const randomParam = `?cache_buster=${new Date().getTime()}`;
window.location.href = window.location.origin + "/logout" + randomParam;
}
我尝试了此功能，但它没有清除浏览器中的缓存文件。
不幸的是，这不是您可以从 Angular 应用程序本身（或在某些情况下从 JavaScript）执行的操作。
浏览器缓存的工作方式是，有很多简化：
第二次访问同一网站时，大多数市场标准浏览器在一段时间内不会再次从服务器获取“index.html”（和依赖项）。浏览器的常见做法是将index.html 及其所有下载的依赖项存储在浏览器缓存中。
步骤 1 和 2 发生在执行任何 JavaScript 函数之前。
那么我们该如何应对呢？
Angular 默认构建过程将始终生成一个“index.html”文件及其（非常重要）具有不同名称的依赖项（其内容的哈希值）
Ex：今天我们构建一下，生成如下 index.html，参考文献：
我们决定更改应用程序上的某些内容；再次构建时会生成以下内容：
index.html，参考文献：
（请注意“index.html”仍然存在，并且其他文件名已更改）
这里有一个技巧：由于对角度应用程序的所有请求首先都是通过让网络服务器提供“index.html”来完成的，因此我们将服务器配置为始终提供“index.html”文件，表明它永远不应该被缓存。
我们通过添加标头来告诉浏览器不要缓存它。
例如，这可以通过在服务器提供 index.html 文件时发出的响应上发送Cache-Control 标头来完成。例如
Cache-Control: no-store, no-cache, must-revalidate
这个SO答案更详细地解释了缓存标头。
正如我在一开始所说的，这更多的是一个入门答案，我过度简化了缓存流程。还值得一提的是，Cookie
可能无法通过 JavaScript 代码访问，具体取决于服务器如何配置来创建它们。
正如您所想到的，localStorage、sessionStorage 和其他浏览器缓存可以通过 JavaScript 访问。您的应用程序应该能够处理这些问题，并确定哪些内容有效或无效，并决定何时需要清除这些内容。或者，如果您需要在应用程序上运行测试，确保启动时不存在缓存，我建议使用像
playwright 这样的测试工具，或者可以在测试运行后重新设置的虚拟机。
希望这能让您走上胜利之路