清除浏览器缓存的方法菜鸟指南_缓存菜鸟攻略

关于浏览器缓存浏览器缓存,有时候我们需要他,因为他可以提高网站性能和浏览器速度,提高网站性能。但是有时候我们又不得不清除缓存,因为缓存可能误事,出现一些错误的数据。像股票类网站实时更新等,这样的网站是不要缓存的,像有的网站很少更新,有缓存还是比较好的。今天主要介绍清除缓存的几种方法。怎么清除浏览器缓存?怎么清除浏览器缓存,比如每次进入页面后先清理上次浏览器缓

清除浏览器缓存的方法菜鸟指南

关于浏览器缓存

浏览器缓存,有时候我们需要他,因为他可以提高网站性能和浏览器速度,提高网站性能。但是有时候我们又不得不清除缓存,因为缓存可能误事,出现一些错误的数据。像股票类网站实时更新等,这样的网站是不要缓存的,像有的网站很少更新,有缓存还是比较好的。今天主要介绍清除缓存的几种方法。

清除浏览器缓存的方法菜鸟指南_缓存菜鸟攻略

怎么清除浏览器缓存?

怎么清除浏览器缓存,比如每次进入页面后先清理上次浏览器缓存的html,css,js ? 下面推荐几种方法给大家。

meta方法  

直接在html页面的head标签中添加

<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
<meta http-equiv="expires" content="0"/>

当然这个需要浏览器支持, 不想缓存静态文件, 又不想改服务器配置, 最直接的方法是加时间戳 如: ***.css?t=xxxx 。

清理form表单的临时缓存 

方式一:用ajax请求服务器最新文件,并加上请求头If-Modified-Since和Cache-Control,如下:

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

方法二,直接用cache:false,

 $.ajax({
     url:'www.haorooms.com',
     dataType:'json',
     data:{},
     cache:false, 
     ifModified :true ,

     success:function(response){
         //操作
     }
     async:false
  });

方法三:用随机数,随机数也是避免缓存的一种很不错的方法!

URL 参数后加上 "?ran=" + Math.random(); //当然这里参数 ran可以任意取了
eg:
<script> 
document.write("<s"+"cript type='text/javascript' src='/js/test.js?"+Math.random()+"'></scr"+"ipt>"); 
</script>

其他的类似,只需在地址后加上+Math.random() 
注意:因为Math.random() 只能在Javascript 下起作用,故只能通过Javascript的调用才可以 

方法四:用随机时间,和随机数一样。

在 URL 参数后加上 "?timestamp=" + new Date().getTime(); 

用PHP后端清理

在服务端加 header("Cache-Control: no-cache, must-revalidate");等等(如php中)

方法五:

5、window.location.replace("WebForm1.aspx");   
参数就是你要覆盖的页面,replace的原理就是用当前页面替换掉replace参数指定的页面。   
这样可以防止用户点击back键。使用的是javascript脚本,举例如下: 
a.html 
以下是引用片段: 
<html> 
     <head> 
         <title>a</title>      
         <script language="javascript"> 
             function jump(){ 
                 window.location.replace("b.html"); 
             } 
         </script> 
     </head> 
     <body> 
        <a href="javascript:jump()">b</a> 
    </body> 
</html>  

b.html 
以下是引用片段: 
<html> 
     <head> 
         <title>b</title>      
         <script language="javascript"> 
             function jump(){ 
                 window.location.replace("a.html"); 
             } 
         </script> 
     </head> 
     <body> 
        <a href="javascript:jump()">a</a> 
    </body> 
</html>  
海计划公众号
(0)
上一篇 2020/03/29 01:45
下一篇 2020/03/29 01:45

您可能感兴趣的内容

  • Taro基础入门_多端统一开发框架,生成能运行在微信小程序、H5、React Native 等的应用

    Taro基础入门 官方网址:https://taro.aotu.io/ GitHub:https://github.com/NervJS/taro 简介描述:多端统一开发框架,生成…

    2020/03/06
  • Meta标签大全使用说明web开发常用meta整理_meta入门百科

    meta标签提供关于HTML文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。 必要属性属性值描述contentsome text定义与http-equiv或name属性相关的元信息可选属性属性值描述http-equivcontent-type / expire

    2020/04/05
  • vue2.6中slot的新用法使用教程_slot小白知识

    最近发布不久的Vue 2.6,使用插槽的语法变得更加简洁。 对插槽的这种改变让我对发现插槽的潜在功能感兴趣,以便为我们基于Vue的项目提供可重用性,新功能和更清晰的可读性。 真正有能力的插槽是什么?如果你是Vue的新手,或者还没有看到2.6版的变化,请继续阅读。也许学习插槽的最佳资源是Vue自己的文档,但是我将在这里给出一个纲要。插槽是什么?插槽是Vue组件

    2020/03/30
  • Web秀菜鸟教程网_让你的技术真正秀起来

    Web秀菜鸟教程网 官方网址:http://www.javanx.cn/ 简介描述:让你的技术真正秀起来 Web秀用于记录开发遇到的点点滴滴,从前端、到后台、到服务器等等干货分享,…

    2020/03/11
  • hCoder小白知识_更好、更快的开发

    hCoder小白知识 官方网址:http://www.hcoder.net/ 简介描述:更好、更快的开发 hCoder 是一个以实用技能为主的学习平台。提供了丰富的php开发、we…

    2020/03/07
  • 百姓网使用攻略_​领先的分类信息网

    百姓网使用攻略 官方网址:http://baixing.com/ 简介描述:​领先的分类信息网 ​领先的分类信息网。您可以免费查找各种新鲜的二手物品交易、二手车买卖、房屋租售、宠物…

    2020/03/06
  • 从微前端聊聊架构演进 指南攻略_微前端菜鸟指南

    就目前来看,微前端已经不是一个新话题了。随着越来越多的公司的深入研究,当前也提出了很多的解决方案。不过本文不是想要来介绍微前端,更想介绍项目如何一步步到达微前端架构的实际需求。当然,也不排除有些项目在初期就需要微前端这样的架构,不过我一直相信,任何架构模式都是根据实际需求来构建的。为什么很多大公司投入那么多的精力去做这样一件事,更多的也是因为他们真正需要这样

    2020/03/20
  • Js队列和双端队列菜鸟知识_算法基础知识教程

    队列遵循的是先进先出(FIFO)原则的一组有序的项,并从顶部移除元素,但是最新添加的元素必须排在队列的末尾。在生活中也有队列的应用,比如我们在售票处排队等票,队头的人先拿到票,就走了,而新来的人,就必须排在队伟文明排队。队列创建队列class Queue {constructor() {this.count = 0;this.lowestCount = 0;

    2020/03/29
  • npx基础知识教程_一种npm包的执行器

    npx基础知识教程 官方网址:https://github.com/zkat/npx GitHub:https://github.com/zkat/npx 简介描述:一种npm包的…

    2020/03/06
  • “写”一个js的new运算符指南教程_new菜鸟指南

    new 运算符 创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。比较好奇new运算符的原理,了解了下,分享给大家。看一下MDN上的简单:function Person(name, age, sex) {this.name = name;this.age = age;this.sex = sex;
    }
    var rand = new Person

    2020/03/30
  • 合格的前端不少,优秀的不多小白知识_前端使用说明

    工作有4个年头了,没什么成就,但也算有点经验,还有你们这群可爱的小伙伴的陪伴,这几年遇到过不少的前端同事或者朋友,我发现,同样的前端工作,有人的工作输出确实是更加的优秀。人与人之间,真的有很大的差别。 今天,我们就来聊一下身边的优秀的前端,是怎样对待前端这份工作的?总结了几点:1.理解产品需求的根源,并尝试站在用户的角度给出建议,而不是仅仅作为实现功能的码农

    2020/04/03
  • 码云基础知识教程基于Git和SVN的代码托管和研发协作平台

    码云基础入门 官方网址:https://gitee.com/ 简介描述:基于Git和SVN的代码托管和研发协作平台 码云(gitee.com)是开源中国社区团队推出的基于Git的快…

    2020/03/05
  • nodejs支持高并发吗?小白知识_高并发入门知识

    nodejs是支持高并发的。那么为什么单线程的nodejs可以高并发?下面本篇文章就来给大家介绍一下,希望对大家有所帮助。nodejs支持高并发的原因:nodejs是非阻塞异步操作。针对每个并发请求,服务端给请求注册一个激发事件(I/O),并给一个回调函数(这个过程没有阻塞新的连接请求)。按顺序执行事件处理(I/O),处理完成后执行回调函数,接着执行下一个事

    2020/03/24
  • Js实现深浅复制菜鸟教程下载_拷贝小白攻略

    为什么有深复制、浅复制?JavaScript中有两种数据类型,基本数据类型如undefined、null、boolean、number、string,另一类是Object。简单数据类型只存储在内存中的栈区,复制的时候是值传递给新的索引。而复杂数据类型由栈区和堆区共同储存,栈区执行同样的操作,只是把堆地址复制了一份,而真实数据在堆区中依然只有一份。为了不影响原

    2020/03/23
  • javascript可以重载吗?基础教程_重载基础知识

    所谓重载,就是一组相同的函数名,有不同个数的参数,在使用时调用一个函数名,传入不同参数,根据你的参数个数,来决定使用不同的函数!但是我们知道js中是没有重载的,因为后定义的函数会覆盖前面的同名函数,但是我们又想实现函数重载该怎么办呢?我们可以通过其他的方式来模拟重载,我们可以通过argument方法来实现。 argument是系统自带的一个方法,它是一个数组

    2020/03/20
  • 十大热门语言及发明者大盘点基础教程_语言小白常识

    软件领域有许多编程语言,每年还涌现出越来越的新语言。新发布的语言有Scala、Kotlin、Go和Closure,但历史证明,只有少数语言能存活下来,其中一些语言对软件领域的发展做出了巨大贡献。编程语言是软件领域的重要一环,虽然大家对热门的编程语言了解较多,例如大家都知道詹姆斯·高斯林发明了Java,但不是每个人都知道Perl,Pascal, Lisp,或是

    2020/04/03