离线存储是指在用户没有与因特网连接时, 可以正常访问站点或应用, 在用户与因特网连接时, 更新用户机器上的缓存文件。
HTML5
的离线存储是基于一个新建的 .appcache
文件的缓存机制(不是存储技术), 通过这个文件上的解析清单离线存储资源, 这些资源就会像 cookie
一样被存储了下来。之后当网络在处于离线状态下时, 浏览器会通过被离线存储的数据进行页面展示。
html
同名的 manifest
文件, 然后在页面头部加入 manifest
属性<html lang="en" manifest="index.manifest">
cache.manifest
文件中编写需要离线存储的资源
CACHE
: 表示需要离线存储的资源列表, 由于包含 manifest
文件的页面将被自动离线存储, 所以不需要把页面自身也列出来NETWORK
: 表示在它下面列出来的资源只有在在线的情况下才能访问, 他们不会被离线存储, 所以在离线情况下无法使用这些资源。不过, 如果在 CACHE
和 NETWORK
中有一个相同的资源, 那么这个资源还是会被离线存储, 也就是说 CACHE
的优先级更高FALLBACK
: 表示如果访问第一个资源失败, 那么就使用第二个资源来替换他, 比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了, 那么就去访问 offline.html
CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
resourse/logo.png
FALLBACK:
/ /offline.html
window.applicationCache
进行离线缓存的操作manifest
文件javascript
操作5MB
)manifest
文件, 或者内部列举的某一个文件不能正常下载, 整个更新过程都将失败, 浏览器继续全部使用老的缓存manifest
的 html
必须与 manifest
文件同源, 在同一个域下FALLBACK
中的资源必须和 manifest
文件同源manifest
属性, 请求的资源如果在缓存中也从缓存中访问manifest
文件发生改变时, 资源请求本身也会触发更新