Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

js清除浏览器缓存的几种方法 #5

Open
giscafer opened this issue Aug 4, 2016 · 5 comments
Open

js清除浏览器缓存的几种方法 #5

giscafer opened this issue Aug 4, 2016 · 5 comments
Labels
HTML JavaScript Review 性能优化

Comments

@giscafer
Copy link
Owner

giscafer commented Aug 4, 2016 •
edited
Loading

关于浏览器缓存

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

清理网站缓存的几种方法

web服务器设置
通过web服务器设置 Cache-Control 缓存配置，比如nginx等

meta方法

//不缓存

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

清理form表单的临时缓存

<body onLoad="javascript:document.yourFormName.reset()">
其实form表单的缓存对于我们书写还是有帮助的，一般情况不建议清理，但是有时候为了安全问题等，需要清理一下！

jquery ajax清除浏览器缓存

方式一：用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可以任意取了

方法四：用随机时间，和随机数一样。

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

方法五：用php后端清理

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

今天面试官有问到，顺便复习一下，摘自网络原文

update:2016-8-4 20:32:45
@mino01x
Copy link

mino01x commented Sep 8, 2017

通过meta方法设置不知道为什么不能生效。

@calamus0427
Copy link

meta方法谷歌等浏览器不支持

@giscafer
Copy link
Owner Author

@calamus0427 是的，不是很有效，有时候是不行的

@00ming
Copy link

00ming commented May 23, 2018

怎么让谷歌浏览器不缓存呢

@giscafer
Copy link
Owner Author

giscafer commented May 23, 2018 •
edited
Loading

@00ming 如果不是通过文件版本号或者hash的方式，前端技术做不到的。可能需要配合后端和运维控制。比如假设项目是前后端分离的，前端静态页面是nginx服务部署，nginx有配置可以禁用指定文件类型不缓存。所有浏览器加载都会重新下载文件。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
HTML JavaScript Review 性能优化
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@giscafer @calamus0427 @00ming @mino01x