html5 原生页面添加时间戳解决缓存问题及清除缓存的几种方式

公司因要兼容ie6问题，没有用Vue、react前端框架，使用原生的js加h5编写的页面。最近项目更新版本的时候，线上版本没有及时的更新,究其原因是因为浏览器缓存的问题（frommemorycache/fromdiskcache）。解决这个问题的最好方法就是在css和js后面加一个时间戳或者版本号。如果你的页面是服务器端用框架渲染的，你就让他们声明全局变量时间戳或者版本号加载css、js后面。如果

-hector-

4008人浏览 · 2020-09-21 17:00:42

-hector- · 2020-09-21 17:00:42 发布

公司因要兼容ie6问题，没有用Vue 、react前端框架，使用原生的js加h5编写的页面。

最近项目更新版本的时候，线上版本没有及时的更新,究其原因是因为浏览器缓存的问题（from memory cache/from disk cache）。

解决这个问题的最好方法就是在css 和 js 后面加一个时间戳或者版本号。

如果你的页面是服务器端用框架渲染的，你就让他们声明全局变量时间戳或者版本号加载css、js后面。

如果你的页面是前后分离的你可以在js里面写一个输出时间戳或者版本号js函数。

//js 加时间戳
document.write('<script type="text/javascript" src="./js/header.js?t='+ new Date().getTime() +'"><\/script>');
//css 加时间戳
document.write("<link rel=\"stylesheet\" href=\"./css/common.css?t="+ new Date().getTime() +"\" type=\"text/css\" media=\"screen\"/>");
//img 加时间戳
img.src += '?t='+(+new Date().getTime());

清除缓存的几种方式

1.meta方法

//不缓存 
<META HTTP-EQUIV="pragma" CONTENT="no-cache"> 
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
<META HTTP-EQUIV="expires" CONTENT="0">

2.清理form表单的临时缓存

<body onLoad="javascript:document.yourFormName.reset()">

3.ajax清除缓存

用ajax请求服务器最新文件，并加上请求头If-Modified-Since和Cache-Control

$.ajax({ 
    url: url, 
    dataType:'json', 
    data:{}, 
    beforeSend :function(xmlHttp){ 
        xmlHttp.setRequestHeader("If-Modified-Since","0"); 
        xmlHttp.setRequestHeader("Cache-Control","no-cache"); 
    }, 
    success:function(response){ console.log(response) },
    async:false });

直接用cache:false

$.ajax({ 
    url: url, 
    dataType:'json', 
    data:{}, 
    cache:false, 
    ifModified :true , 
    success:function(response){ console.log(response); } ,
    async:false 
});

用随机数，或随机时间

URL 参数后加上 "?time=" + Math.random();
或者在 URL 参数后加上 "?timestamp=" + new Date().getTime();

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^