携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天juejin.cn/post/712312…
离线存储（浏览器缓存、客户端缓存）
传统的浏览器缓存，通过浏览器来判定需要缓存网页的哪些内容到本地你例如缓存网页上的所有图片，css文件，js文件等等，当再次访问该页面时，浏览器会优先从浏览器缓存中读取缓存的内容，没有被缓存的内容才会向服务器请求相关内容。只有缓存过期或者用户强制缓存才会重新向服务器请求内容。如果服务器页面内容发生改变，但是浏览器缓存中的内容，还是旧页面的内容，用户浏览器的可能还会是旧页面的内容。
传统缓存：根据浏览器的缓存规则（基本缓存的都是静态资源），存储数据，开发者控制不了。减少带宽的好处：减少流量的使用，每次向服务器发送请求，都需要流量。如果没联网，缓存在电脑上的数据也不会显示。
快捷键：Shift+f5强制刷新
H5提供的新的缓存模式——离线缓存
离线缓存：用户可以在离线状态下浏览网站内容
更快的速度：因为数据被存储在本地，所以速度会更快。
减轻服务器的负载：浏览器指回下载服务器上发生改变的资源。
h5离线缓存需要由开发人员自己定义缓存的页面内容，那就需要有一个缓存文件清单，这个文件时一个mainfest后缀名的文件，使用HTML5离线存储就必须有这个文件，而且必须在服务器端左修改。使得.manifest后缀名的文件mime类型为text/cache-manifest。典型的一个文件清单类似下面这个，一定是以CACHE MANIFEST开头的。
#version 1.0 版本号 涉及到了缓存更新 如果浏览器发现缓存内容和服务器的内容不一样了，就会去服务器发请求更新
CACHE:指定你要浏览器进行离线存储的文件列表，一个文件一行。这里面写要缓存的文件
NETWORK：跟CACHE相反，指定浏览器一定要通过网络访问的文件列表。肯定不缓存的文件
FALLBACK：404.html 如果通过网络访问失败了，就去访问紧跟着的那个在本地缓存好的文件。
h5缓存的更新策略
HTML5的缓存更新策略是由manifest清单是否为最新版本来决定的，所以浏览器首先会根据HTTP的缓存策略去探测manifesti清单是否最新，如果最新（浏览器返回304)，则不会去下载清单里指定的缓存文件来更新离线存储，如果不是最新的（浏览器返回200)，则会根据最新的manifesti清单去重新下载指定的一系列文件，然后更新离线存储。这里要注意，由于判断manifesti清单是否最新是利用了HTTP的缓存策略的，所以可能出现你更改了manifest文件，但是离线存储却没有更新的情况，这可能是因为你的服务器为你的manifesti清单文件设置了相应的缓存头，manifesti清单文件还未过期，这是浏览器并没有真正向服务器发起请求确认manifest的新鲜度，而是直接使用了缓存的manifest文件，另外一个需要注意的是，修改了一些文件以后想要让离线存储更新，就必须改动。
如何更新缓存
■如下三种方式，可以更新缓存：
(1)更新manifest文件
■(2)通过javascript操作
■(3)清除浏览器缓存 给nanifest添加或删除文件，都可更新缓存，如果我们更改了js，而没有新增或删除，前面例子中注释中的版本号，可以很好的用来更新manifest文件。
html5中引入了js操作离线缓存的方法，下面的js可以手动更新本地缓存。 window.applicationCache.update();
·如果用户清除了浏览器缓存（手动或用其他一些工具）都会重新下载文件。
