0


前端清除页面缓存的方法

1、meta方法,在head标签里添加代码

<!-- 指定Expires值为一个早已过去的时间,访问时若重复在地址栏按回车,每次都会重复访问 -->
<meta http-equiv="Expires" content="0">
<!-- 禁止浏览器从本地计算机的缓存中访问页面内容。(这样设定,访问者将无法脱机浏览。) -->
<meta http-equiv="Pragma" content="no-cache">
<!-- Cache-control值为no-cache时,访问此页面不会在Internet临时文件夹留下页面备份 -->
<meta http-equiv="Cache-control" content="no-cache">
<meta http-equiv="Cache" content="no-cache">

Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached,响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。

指令含义如下:

指令含义Public指示响应可被任何缓存区缓存Private指示对于单个用户的整个或部分响应消息,不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息,此响应消息对于其他用户的请求无效no-cache指示请求或响应消息不能缓存no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存max-age指示客户机可以接收生存期不大于指定时间(以秒为单位)的响应min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值,那么客户机可以接收超出超时期指定值之内的响应消息

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

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

3、css和js文件清除缓存

<link rel="stylesheet" href="../css/index.css"/>
<script src="../js/index.js"></script>
<!-- 改为以下写法 -->
<link rel="stylesheet" href="../css/index.css?v=20201037"/>
<script src="../js/index.js?v=20201037"></script>

不过这样写每次都需要修改,改成动态添加时间戳:

<script type="text/javascript">
        document.write('<script src="../js/index.js?v=' + new Date().getTime() +'" type="text/javascript" charset="utf-8"><\/script>');
</script>

4、jQuery、ajax清除缓存

// 1、通过$.ajaxSetup 设置属性cache:false,让ajax不调用浏览的缓存:
jQuery.ajaxSetup ({
    cache:false
});
 
// 2、在ajax的url后加上随机串来避免浏览缓存,随机数也是避免缓存的一种很不错的方法:
$.ajax({
    url: 'api/test?refresh=' + parseInt(Math.random() * 100000)
});

//3、在ajax发送请求前加上 xmlHttp.setRequestHeader("If-Modified-Since", "0");
$.ajax({
    url: 'api/test',
    beforeSend: function(xmlHttp) {
        xmlHttp.setRequestHeader("If-Modified-Since", "0");
    }
});

// 4、在ajax发送请求前加上 xmlHttp.setRequestHeader("Cache-Control", "no-cache");
$.ajax({
    url: 'api/test',
    beforeSend: function(xmlHttp) {
        xmlHttp.setRequestHeader("Cache-Control", "no-cache");
    }
});

// 5、直接使用 cache: false
$.ajax({
    url: 'api/test',
    cache: false,
    ifModified: true
});

// 6、在服务端加上 header("Cache-Control: no-cache, must-revalidate");

5、nginx配置不缓存

location = /index.html {
    add_header Cache-Control "no-cache, no-store";
}

// 配置了反向代理则如下:(xx为你的代理的项目名)    
location = /xx {
    add_header Cache-Control "no-cache, no-store";
}

6、Vue项目缓存

6.1 每次打包时修改在package.jsonversion的属性值

6.2 配置vue.config.js

const Version = new Date().getTime()

module.exports = {
    css: {
        loaderOptions: {
            sass: {
                data: `@import "@/components/themes/_handle.scss";`
            }
        },
        // 是否使用css分离插件 ExtractTextPlugin
        extract: {
            // 修改打包后css文件名
            filename: `static/css/[name].${Version}.css`,
            chunkFilename: `static/css/[name].${Version}.css`
        }
    },
    configureWebpack: {
        output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】
            filename: `static/js/[name].${Version}.js`,
            chunkFilename: `static/js/[name].${Version}.js`
        }
    },
    chainWebpack(config) {
        // img的文件名修改
        config.module
            .rule('images')
            .use('url-loader')
            .tap(options => {
                options.name = `static/img/[name].${Version}.[ext]`
                options.fallback = {
                    loader: 'file-loader',
                    options: {
                        name: `static/img/[name].${Version}.[ext]`
                    }
                }
                return options
            })
    }
}
标签: 前端 缓存 html

本文转载自: https://blog.csdn.net/qq_39998026/article/details/130501092
版权归原作者 卿本无忧 所有, 如有侵权,请联系我们删除。

“前端清除页面缓存的方法”的评论:

还没有评论