开发离线Web应用的步骤:
1.检测设备是否可以上网;
2.能访问一定的资源;
3.有一块本地空间保存数据。
1. 离线检测:
如何检测设备是否可以上网?
HTML5定义了navigator.onLine属性,值为true表示能上网,值为false表示设备离线。
HTML5还定义了两个事件,在window对象上触发:
online:网络从离线变为在线
offline:网络从在线变为离线
2. 应用缓存:
从缓存中访问离线资源
HTML5的应用缓存为appCache(application cache),它是从浏览器缓存中分出来的一块缓存区。通过一个描述文件列出缓存清单:
CACHE MANIFEST
#Comment
file.js
file.css
这些清单中的文件会下载下来,在离线时使用。
该清单如何与页面连接?
在html标签中manifest属性中指定清单的路径
<html manifest="/offline.manifest">
3. 数据存储
在一块本地空间中保存数据。
3.1 Cookie
Cookie是最初的数据存储方法,服务器端创建cookie,在HTTP请求头中将Set-Cookie作为响应的一部分。
A. 限制
Cookie绑定在特定的域名下,当创建了cookie后,返回响应时,cookie会保存在客户端中,为了保证cookie不会占用太多磁盘空间,还有更好的浏览器兼容性,cookie有以下限制:
每个域的cookie总数是有限的;
浏览器对于cookie的尺寸也有限制,不能过长。
B. cookie的构成
名称:唯一确定cookie的名称。
值:储存在cookie中的字符串值。
域:cookie对于哪个域有效。
路径:对于指定域中的路径,才会发送cookie。
失效时间:cookie何时被删除。
安全标志:只有在SSL连接时才发送到服务器,即链接为https开头。
域、路径、失效时间、安全标志是服务器给浏览器的指示,以告知浏览器何时应该在请求中发送cookie。
C. JS中的cookie
JS中处理cookie的接口为document.cookie属性。
D. 子cookie
为了解决浏览器对某域名下的cookie数的限制,引入子cookie,使用cookie值存储多个名称值对儿。
name=name1=value1&name2=value2&name3=value3
E. 关于cookie的思考:
尽可能在cookie中少存储信息,以避免影响性能。
由于cookie的性质和局限不能存储大量信息,因此出现了其他的方法。
3.2 Web存储机制
Web Storage 的目的是客服cookie带来的一些限制,数据可以一直保存在客户端,无需发回服务器。
它的目标为:
提供在cookie之外保存会话数据的途径;
可以保存大量数据。
主要有两个windows对象:sessionStorage和globalStorage
A. Storage对象:
跨会话持久化数据并遵循跨域安全策略。
有如下方法:
clear():删除所有值
getItem(name):根据指定的名字name获取对应的值
key(index):获得index处的值的名字
removeItem(name):删除由name指定的名值对儿
setItem(name,value):为指定的name设置一个对应的值
B. sessionStorage对象:
在一个浏览器会话中存储数据,浏览器关闭后数据立即删除。
3.3 IndexedDB
IndexedDB是在一种数据库,保存浏览器中的结构化数据,保存的形式为对象。