移动端H5界面 前端html app 自动清除引入的css js缓存方法

笔者近期在开发移动端h5界面,发现每次改完样式 js都需要强制清除下手机浏览器的缓存,才显示效果,但是通过微信浏览器进行查看时没找到清除缓存的按钮,于是乎,自己上网上找了写方法,又在学习群里交流了下,总结出以下方法

1.添加版本号或者标识号

在引用的css 跟js 后面,添加一个版本号,至于怎么使用规则,可以跟组内小伙伴约定好,这样子升级到正式环境的时候,就不用用户自己清理缓存了.（原理：增加了一个参数，且该参数是一个随机数，每次都不一样，所以每次的请求参数都不一样，服务器会将其作为一个新的请求，重新返回结果，而不会使用缓存）

示例如下:

/*版本号*/ <link rel="stylesheet" href="css/yours.css?v=1.0.1"/> <script src="js/yours.js?v=1.0.1"></script> /*标识号*/ <link rel="stylesheet" href="css/yours.css?t="/>//加一个标识 强制浏览器重新加载此文件 <script src="js/yours.js?random="></script> /*图片*/ background:url(.png?) 加一个标识号，使图片不被缓存

2.给URL加上随机数

https://demo.com?v=' + parseInt(Math.random()*) 

3.动态载入js跟css

document.write('<script src="yours.js"></script>')

4.若是jsp页面，可以使用java代码生成时间戳（若是jsp页面用方法一也行，但此方法更方便）

<link rel="stylesheet" type="text/css" href="/css/layout.css?v<%=System.currentTimeMillis() %>">

当我们将页面上线时（即部署到正式环境），建议把版本号固定，因为有缓存的页面访问更快，需要更新的时候再更换下固定版本号。

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdhtml/11112.html