前端清除页面缓存的方法

这篇具有很好参考价值的文章主要介绍了前端清除页面缓存的方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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文章来源地址https://www.toymoban.com/news/detail-473984.html

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
			})
	}
}

到了这里,关于前端清除页面缓存的方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【前端】Vue 部署上线清除浏览器缓存的方式

    修改根目录index.html 在 head 里面添加下面代码 1 2 meta http-equiv = \\\"pragram\\\" content = \\\"no-cache\\\" meta http-equiv = \\\"cache-control\\\" content = \\\"no-cache, no-store, must-revalidate\\\"   配置 nginx 不缓存 html vue默认配置,打包后css和js的名字后面都加了哈希值,不会有缓存问题。但是index.html在服务器端可能是有

    2024年02月09日
    浏览(38)
  • 详解织梦CMS自动清除文章内段落标签的调用方法

    织梦DEDECMS自动清除文章内段落p标签样式而保留p标签的方法: 今天在发布文章时发现,从别处复制过来的文字,自带的样式,特别是采集过来的内容,因为采集时没有做好标签的过滤,导致内容在我们网站上出现网页结构错乱,如下图 如果放在编辑器里清除样式后,又全部

    2024年02月03日
    浏览(51)
  • Video标签添加跨域头信息后的缓存问题

    第一步的页面,这个页面有两个 video标签,他们的 src一样 为第video标签添加参数 crossorigin=“anonymous” ,那么会报错。“xxxx” has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. 这里的video.mp4的静态文件服务器,服务端的代码用 express写的,

    2024年02月16日
    浏览(39)
  • 【Python】pip安装库时存在缓存(及清除方法)

    在使用pip安装Python库时,如果之前已经下载过该库,pip会默认使用缓存来安装库,而不是重新从网络上下载。缓存文件通常存储在用户目录下的缓存文件夹中,具体位置因操作系统和Python版本而异。以下是一些常见的Python版本和操作系统下缓存文件的默认位置: Windows 10:C

    2023年04月13日
    浏览(34)
  • 前端:html实现页面切换、顶部标签栏(可删、可切换,点击左侧超链接出现标签栏)

    效果: 代码  效果  代码 首页  page1.html 效果  代码 效果 解决切换页面时,页面中的内容会进行刷新的问题(实现切换页面,数据不会进行更新的问题) 增加关闭当前页,页面会自动锁定到打开标签页的最后一个页面 增加规定打开标签栏的总数,超过总数,关闭最早打开的页

    2024年02月06日
    浏览(60)
  • 前端:html实现页面切换、顶部标签栏,类似于浏览器的顶部标签栏(完整版)

    效果 代码 解决BUG:关闭单页时,单页数据未清空,导致再次打开单页时出现内容仍然存在的问题

    2024年02月11日
    浏览(52)
  • axios添加缓存请求,防止多次请求,单页面多个同一组件造成多次请求解决方案

    在 vue 开发中,我们偶尔会遇到相同组件多次调用一个请求的问题,即使添加了缓存,但在第一次调用时也会出现这类问题,这种问题的根源往往是由于第一个组件发起的请求没有返回数据,第二个组件没有在缓存中获取到数据而重新发起请求。 解决这种问题我们往往可以分

    2024年02月07日
    浏览(41)
  • 简易版前端项目离线方案-接口及页面离线缓存

    为了避免后端流控、崩溃等异常而无法访问的情况,就需要将接口和页面的静态资源缓存在用户的浏览器本地,这样一来,就算后端服务不可达,前端依旧能有正常的页面显示操作反馈,大部分用户无法感知到系统出现了故障. 这个虽然听起来高大上,其实就是前端服务和后端服务分

    2024年02月03日
    浏览(42)
  • 前端系列第4集-解释下浮动和它的工作原理,清除浮动的方法

    浮动是CSS布局中的一个重要概念,它可以让元素脱离标准文档流,并且可以让其他元素环绕在其周围。通常情况下,浮动用于创建多列布局或者图像与文字混排的效果。比如,我们可以使用浮动来实现一个左侧导航栏、右侧主体内容的页面布局。 浮动的工作原理很简单。当一

    2023年04月08日
    浏览(42)
  • uni跳转页面不缓存上一个页面的方法

    要实现一个需求,从a页面跳转到b页面,从b页面跳转到c页面,然后按返回,从c页面直接返回a页面(不返回b页面) a-b-c c-a 前端框架使用的是uni-app,我们修改为了当b页面跳转到c页面时,使用 redirectTo 的跳转方式,这样在c页面按返回键,可以返回a页面。 1.使用 redirectTo 跳转

    2024年02月07日
    浏览(60)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包