问题描述javascript
最近在上线新版本项目的时候,发现有的用户的操做仍是调用的老版本JS里面的内容,这样就形成原来新的JS里面加上的限制不能限制用户的操做,从而致使用户能够重复操做。css
问题产生缘由html
若是在用户以前已经访问过系统,那么浏览器中会缓存该系统的CSS、JS,这些CSS、JS缓存未过时以前,浏览器只会从缓存中读取CSS和JS,若是在服务器上修改了css和js,那么这些修改在用户的浏览器中是不会有变化的。java
解决方案浏览器
解决方式一:缓存
用户按Ctrl + F5强制刷新页面或者手动清空了浏览器的缓存。此时浏览器会从新向服务器获取CSS和JS文件,新的文件便会生效。服务器
解决方式二:dom
可是用户量过大的时候总不能让每一个用户一一清理缓存吧,因而便从代码的角度着手解决这个问题。在js后面添加版本号,让浏览器把这个JS文件当作新的文件从新向服务器获取资源。函数
加版本号以前:ui
<script type="text/javascript" th:src="@{/js/test/index.js}"></script>
加版本号以后:
<script type="text/javascript" th:src="@{/js/test/index.js?v=1.0}"></script>
此时问题解决,CSS与上相似。
问题延伸:
可是JS文件或CSS过多的状况下须要一个一个的去修改版本号,会花费大量的时间,这个时候须要怎么操做呢???
<script type="text/javascript" src="/js/common.js?t={{date("Y-m-d")}}" ></script> 使用日期,从新请求服务器。
<script type="text/javascript" src="/js/common.js?t={{time()}}" ></script> 使用时间戳
<script type="text/javascript" >loadJs("http://localhost:8081/static/html/convention.js.js?timestamp="+Math.random(),null);</script>
<!-- 须要引入Date日期函数类-> <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" import="java.util.*"%> <script type="text/javascript" src="<%=request.getContextPath() %>/js/sign/contactList.js?v=<%=new Date().getTime() %>" charset="UTF-8"></script>