解决index.html缓存问题

html-css012

解决index.html缓存问题,第1张

解决index.html缓存问题 一般项目发版后前端静态文件会有缓存问题， 不强制刷新很难解决， 但是用户不会去强制刷新， 这就需要我们开发人员在配置方面解决浏览器缓存静态文件问题。 一般浏览器缓存的文件有html、css、js等。 css、js文件被缓存的解决方案 一般html中引入的css和js的名字都加了哈希值，所以新版本css、js和就旧版本的名字是不同的，不会有缓存问题。 如果index.html文件被缓存就稍微麻烦些 首先可以在index.html文件头部添加mate标签禁止缓存 <meta http-equiv="Expires" content="0"> <meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-control" content="no-cache"> <meta http-equiv="Cache" content="no-cache"> 浏览器的缓存解决， 但是一般在服务器端还是会有缓存， 当浏览器访问index.html时拿到的就是服务器缓存的文件，所有我们还需要解决服务器的缓存 这需要在服务器配置不让缓存index.html nginx 配置如下： location = /index.html { add_header Cache-Control "no-cache, no-store" }

给网址后面添加一个随机数（或者是任意的字符串）即可，比如原来的网址是这样的：

http....../.../1.htm

改为

http....../.../1.htm?1234

即可（注意问号不能省）。

浏览器是根据网址来缓存的，所以只要给网址接个尾巴，浏览器就会认为是新网址，就会从网上重新下载数据了。当然，如果下次再次改变了网页内容，这个尾巴就要再次修改。

给css和js添加所谓版本号其实也是同一个原理。这个版本号其实就是给css和js的网址接个尾巴而已。

这个也同样适用网页里面的图片、音乐等资源，事实上只要是http协议的元素都可以利用这个办法来避开缓存实时刷新。

怎样解决css缓存的问

步骤1/6

新建一个html文件，命名为test.html，用于讲解怎样解决css缓存的问题。

步骤2/6

在test.html文件中，使用div标签创建一个模块，用于测试。

步骤3/6

在test.html文件中，给div标签添加一个class属性，用于样式的设置。

步骤4/6

新建一个css文件，命名为test.css，在文件内通过class定义div的css样式 ，设置其宽度为200px，高度为200px，背景颜色为红色。

步骤5/6

在test.html文件中，在js标签内，使用write()方法输出css文件的link标签，并在css路径的末尾通过日期对象随机一个数字。

步骤6/6

在浏览器打开test.html文件，查看页面效果，css文件就不会缓存了。

1、使用div标签创建一个模块，创建一个css文件。

2、在js中，通过class获得div对象，使用write()方法输出css文件的link标签，并在css路径的末尾通过日期对象随机一个数字。