流程：离线存储就是在离线状态也可以访问之前访问过的页面
图片.png
分析：当有网的情况下，浏览器会访问离线缓存的内容，同时会潜在的向服务器发送一个请求，看版本号是否更新，如果更新就会将新的内容返回到缓存中，但是此时，浏览器拿到的是之前的缓存内容，并不会拿到新的更新后的数据，只有再次刷新页面才会拿到新的上次更新后的数据。在没有网的情况下，它拿到的还是缓存里的，就算发送请求，也是请求失败的。
我们需要放在服务器环境下才会生效，用服务器的开启和停止来模拟有网和断网。
过程：在html文件中的<html>标签中
<html lang="en" manifest="manifest.manifest">
在html同级新建一个文件manifest.manifist
CACHE MANIFEST
#version 1.1124
CACHE:
index.css
index2.css
images/a.png
NETWORK:
*
实际开发过程中，后端会用工具自动生成manifest文件
当前页面需要缓存的资源写到CACHE下
只要内容变了，版本号变，缓存的内容才会变，不然不会变
这样得刷新两次，所以可以用js解决这个问题，原理就是要通过监听updateReady，看是否有更新，如果更新，就将原缓存换成新缓存，用reload()重新刷新页面.
代码如下：
<script>
window.addEventListener('load', function(e) {
window.applicationCache.addEventListener('updateready', function(e) {
if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
// 调用applicationCache.swapCache()即可将原缓存换成新缓存。
window.applicationCache.swapCache();
window.location.reload();
}
}, false);
}, false);
这样就不用刷新两次了，正常操作，改版本号就可以啦。
图片的话，浏览器会默认缓存，如果要设置的话，就在maifest文件里CATCH下写图片路径就好了 比如：image/a.png
