引入静态资源文件时，添加时间戳或随机数，防止浏览器缓存。

最新推荐文章于 2024-07-02 16:20:13 发布

众生难渡.

最新推荐文章于 2024-07-02 16:20:13 发布

阅读量4.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：浏览器缓存文章标签： javascript

原文链接：https://blog.youkuaiyun.com/jimolangyaleng/article/details/106276835

浏览器缓存专栏收录该内容

1 篇文章

订阅专栏

本文介绍了解决浏览器缓存问题的有效方法，通过在URL后添加时间戳或随机数，确保加载最新资源，避免使用过期的js/css/img文件。提供代码示例，适用于不同场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

添加时间戳或随机数，防止浏览器缓存

在日常的项目中，会遇到浏览器缓存的问题，也就是说，在加载静态资源文件时，浏览器使用的是过时的资源，IE浏览器默认会使用缓存，所以当我们修改了js/css/img时，就可能无法更新到最新的最新的资源。这个时候，有两种方法，可以解决此问题。

清除浏览器缓存

在浏览器的设置中，手动设置禁用浏览器缓存，这种是最简单、最直接的方法，但是对于一个产品来说，却是最笨的办法。具体设置，请百度…

在URL后添加随机数或时间戳

这是一种非常实用的方法，添加随机数或时间戳之后，访问的URL会发生改变，所以浏览器会再次请求服务器，不会使用浏览器的缓存。

添加时间戳

<script>
    document.write('<link href="../css/main.css?v=' + new Date().getTime() + '" rel="stylesheet" type="text/css"/>');
</script>

<script>
    document.write('<script src="js/textarea.js?' + new Date().getTime() + '"><\/script\>');
</script>

<script>
	 document.write('<img style="height: 200px; width: 200px" src="${pageContext.request.contextPath}/img/page.jpg?time=' + new Date().getTime() + '"class="a b" />');
</script>

添加随机数

<script>
    document.write('<link href="../css/main.css?v=' + Math.random() + '" rel="stylesheet" type="text/css"/>');
</script>

<script>
    document.write('<script src="./index.js?' + Math.random() + '"><\/script\>');
</script>