手机端如何真正的解决页面缓存问题

最新推荐文章于 2024-08-14 15:44:25 发布

vcxiaohan2

最新推荐文章于 2024-08-14 15:44:25 发布

阅读量2.2w

点赞数 3

分类专栏：手机端文章标签：前端 js 手机

本文链接：https://blog.csdn.net/u011500781/article/details/53332926

版权

手机端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

问题重现

当我们需要开发手机端页面的时候，不得不在真机中调试
在微信中，可以通过微信提供的设置-通用-存储空间-清理微信(这是ios，android可能略不同)进行页面缓存的清理
在App中，就比较麻烦了，因为App一般不会像微信考虑的那么周全，给你提供清理页面缓存的途径

问题解决

像网上说的一些方法，经本人测试，都是无效的，如给head加meta标签：

<meta http-equiv="pragram" content="no-cache">  
<meta http-equiv="cache-control" content="no-cache, must-revalidate"> 
<meta http-equiv="expires" content="0">

自然而然，我们想到给文件加时间戳，如：

加时间戳前

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <script src="js/test.js"></script> 
</head>  
<body>
    <div class="body"></div>
</body>  
</html>

加时间戳后
```
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <script src="js/test.js?_=1480405186452"></script> 
</head>  
<body>
    <div class="body"></div>
</body>  
</html>
```
这样是可以的，但是请注意，这样只能解决html引入的js或css的缓存问题，html的缓存还是没有解决，也就是说你手机扫码进入页面后，看到的是之前缓存好的【加时间戳前】的html文件，就导致了加的时间戳不生效

为了解决html的缓存问题，我们可以给访问的html链接后面也加上一个时间戳
- 加时间戳前
```
http://v35new.faqrobot.org/robot/app.html
```
- 加时间戳后
```
http://v35new.faqrobot.org/robot/app.html?_=1480405186452
```
以上2种措施都要执行，才能彻底解决手机端缓存问题
- 我们可以通过自动化工具gulp来为html引用的外部资源加时间戳，具体请参考前端构建工具gulp的使用教程集合中的案例一
- 我们让app开发人员给我们页面的访问地址后面加个时间戳，来解决html的缓存问题