随着Web App的发展，越来越多的移动端App使用HTML5的方式来开发，除了一些HybridApp以外， 其他一部分Web App还是通过浏览器来访问的，通过浏览器访问就需要联网发送请求，这样就使得用户在离线 的状态下无法使用App，同时Web App中一部分资源并不是经常改变，并不需要每次都向服务器发出请求，出于 这些原因，HTML5提出的一个新的特性：离线存储。通过离线存储，我们可以通过把需要离线存储在本地的文件 列在一个manifest配置文件中，这样即使在离线的情况下，用户也可以正常使用App。
使用方法:
在html标签中引入manifest文件:
HTML5的离线存储是基于一个新建的.appcache文件的，通过这个文件上的解析清单离线存储资源 ，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据 进行页面展示
缓存流程:
利用一个manifest清单文件告知服务器需要离线的网页文件。
在第一次访问网站时服务器响应manifest文件进行缓存。
在第二次访问该网址时，检测是否达到更新缓存的条件，否则直接使用缓存文件（即使你修改了服务器上的文件）。
这个文件中存储了服务器希望缓存的文件列表:
CACHE MANIFEST
上面一句必须
#v1.0.1
CACHE:当 manifest 文件加载后浏览器会从网站的根目录下载文件，无论用户何时与因特网断开连接，这些资源依然是可用的。
test.html
test.js
doraemon.jpg
NETWORK:
#列出的文件需要与服务器的连接，且不会被缓存
test.css
FALLBACK:
#规定当页面无法访问时的回退页面（比如 404 页面）
404.html
更新缓存:
一旦应用被缓存，它就会保持缓存直到发生下列情况
用户清空浏览器缓存
manifest 文件被修改
由程序来更新应用缓存
离线存储有什么优缺点？
优点
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
2.知识剖析
这个文件中存储了服务器希望缓存的文件列表:
CACHE MANIFEST
上面一句必须
#v1.0.1
CACHE:当 manifest 文件加载后浏览器会从网站的根目录下载文件，无论用户何时与因特网断开连接，这些资源依然是可用的。
test.html
test.js
doraemon.jpg
NETWORK:
#列出的文件需要与服务器的连接，且不会被缓存
test.css
FALLBACK:
#规定当页面无法访问时的回退页面（比如 404 页面）
404.html
更新缓存:
一旦应用被缓存，它就会保持缓存直到发生下列情况
用户清空浏览器缓存
manifest 文件被修改
由程序来更新应用缓存
离线存储有什么优缺点？
优点
离线浏览 - 用户可在应用离线时使用它们
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
缺点
更新的资源，需要二次刷新才会被页面采用
不支持增量更新，只有manifest发生变化，所有资源全部重新下载一次
缺乏足够容错机制，如果manifest文件，或者内部列举的某一个文件不能 正常下载，整个更新过程将视为失败，浏览器继续全部使用老的缓存
注意
在此刻使用这里描述的应用程序缓存功能高度 正在处于从Web平台中被删除的过程。虽然一些浏览器 目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。
存储网页数据的方式？
localStorage - 没有时间限制的数据存储(永久),对于同一个浏览，当用户关闭浏览器窗口后，数据不会被删除。
sessionStorage - 针对一个 session 的数据存储(sesion/),当用户关闭浏览器窗口后，数据会被删除。
cookie：不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
网友评论