1. URL添加时间戳或者随机数
这是最常见且易于实施的一种方法，在引用外部脚本或其他资源链接地址后面附加一个参数，通常是当前的时间戳或者其他唯一标识符：
javascript
var url = 'script.js?v=' + new Date().getTime();
// 或者生成一串唯一的字符串作为查询参数值：
var uniqueId = Math.random().toString(36).substring(2);
url = 'style.css?_=' + uniqueId;
通过这种方式修改URL后，当每次请求该资源的时候实际指向的是不同的“路径”，因此可以避免被浏览器从缓存读取。
2. 使用HTTP头部Cache-Control属性
对于服务器端可控的情况，可以通过设置响应头中的`Cache-Control`字段来指定客户端是否应该缓存某个特定资源以及何时应当重新验证其有效性:
例如发送如下 HTTP 响应头:
Cache-Control: no-cache, must-revalidate
这样告诉浏览器不应用本地缓存，并且必须向服务器检查文档的有效性。
然而，直接操作HTTP响应头部通常不是前端 JavaScript 的职责范围，一般需借助于服务端编程语言配合完成。
3. 利用HTML5 Application Cache (Appcache)
尽管已被废弃但仍存在于一些老旧系统之中，Application Cache 提供了一套机制让开发者明确列出哪些资源可离线存储并自动管理刷新逻辑。如果要完全禁用 AppCache 对某一资源的影响，则应在 manifest 文件里移除对应条目或是不再采用此功能。
4. Service Worker 策略
现代Web应用程序常使用的Service Workers提供了更强大的网络代理能力，可以在fetch事件监听器内自定义缓存处理规则，包括决定什么时候去获取新的资源而不是返回缓存结果：
javascript
self.addEventListener('install', event => {
// ...
});
self.addEventListener('activate', event => {
// 清理旧版service worker关联的所有缓存数据
caches.keys().then(cacheNames => Promise.all(
cacheNames.filter(name => name !== CACHE_NAME)
.map(oldName => caches.delete(oldName))
));
});
self.addEventListener('fetch', event => {
if (...) {
// 针对该 fetch 请求选择回源而非查找缓存
event.respondWith(fetch(event.request));
} else {
// 根据实际情况采取相应的缓存/抓取策略...
}
});
总结来说，基于JavaScript清空页面缓存主要依赖更改资源URI的方式避开已有缓存命中，或者是通过对高级API如Service Worker的应用精细调控整个流程。针对不同场景灵活运用上述手段能有效解决因缓存引发的问题，确保用户始终获得最新鲜的内容体验。