h5缓存处理方法

缓存的目的:保证每个页面刷新后都能够正常显示，不是为了做全局状态共享

有些人错误的使用缓存去做全局状态共享，这个是低效的。不过可以针对要缓存的信息，也可能是需要全局状态共享的，这个时候要注意内存和缓存里的信息保持一致。

例如token一般是全局状态共享的，同时也要缓存下来，方便刷新后免登陆。

要缓存哪些信息:恢复页面ui需要的最小信息,可以从路由页面维度，去思考每个页面需要缓存哪些信息才能保证用户刷新页面后能够正常显示页面；

缓存要注意的问题

1.缓存在前，使用在后，有时候不注意，会发生没有被缓存，就去被使用了。

分析最小缓存信息，每个页面的最小缓存信息

有这个id就可以获取到整个页面的信息

url带参数 方便刷新不丢失信息

内存缓存

前言：

缓存这个问题的出现，真真切切的感受到微信浏览器这鬼东西对前端程序员充满了恶意，捋捋自己的发型，甚是恐慌。

解决方案：

出现缓存问题导致用户出现很多车祸现场（还和java叼起来了），因为是上线了的项目，为了不破环生产环境,让客服暂时教用户解决微信缓存问题。

手动清理缓存

微信浏览器在iOS和安卓中浏览器内核不一样；从而不同的系统和不同版本的微信方式也各有不同。清理缓存的方式也就各种不一样的：

android：debugx5.qq.com，这是微信x5内核浏览器的debug调试页面，在微信浏览器打开，拉到页面最底部，有清理缓存的选项。

安卓微信x5内核浏览器debug页面

ios：

1、 取关公众号，重新关注；

2.、 退出微信账号登陆，重新登陆微信；

3、 微信设置-通用-存储-清理缓存；

4.、 进入页面，右上角‘...’选项中点击“刷新”

自动清理缓存

h5页面设置meta标签

一般浏览器还有用，碰到wx，并没有鸟用

文件加载设置版本号

h5很多都是静态资源，有些链接都是通过后台配的所以加版本号变得 *** 作异常繁琐，解决起来也是摒弃了一些逻辑。不过值得欣慰的是，这个令人头皮发麻的问题得以解决！

版本号有两种：

为啥用第二种，因为微信访问的时候有些场景可能会把参数或者参数值直接给忽略

总结：还是回归现实（天气冷了，还想多买几件格子衫）。

末尾彩蛋

我们再开发web项目时，经常会遇到修改了css、js、html等静态文件，并部署到服务器之后。使用浏览器进行访问的时候，发现并没有什么变化，这就是静态缓存。我们应该如何处理静态缓存呢？首先我们先了解什么是静态缓存。

html文件添加Expires时间

CDN是静态缓存加速最典型的代表。CDN技术并不是一门新的技术，它是基于传统 nginx、squid、varnish 等 web 缓存技术，结合 DNS 智能解析的静态缓存加速技术。

方式二：

uniapp解决缓存的方式与vue一样，但是uniapp兼容了很多平台，所以修改vue.config.js又不太一样。如果uniapp根目录下面没有vue.config.js，则新建vue.config.js文件即可。

---