JavaScript高级编程笔记(5)

离线应用/客户端存储

1.离线检测

(1)、 navigator.onLine 检测设备在线还是离线 (有兼容性问题)
(2)、 为了更好地确定网络是否可用，HTML5还定义了两个事件：online 、offline 。网络在线变为离线或者离线变为在线时，分别触发这两个事件。
(3)、 为了检测应用是否离线，在页面加载后，最好先用navigator.onLine获取初始状态，然后通过上述两个事件来确定网络连接状态是否变化。

2.应用缓存

描述文件示例：

CACHE MANIFEST
#Comment

file.js
file.css

要将描述文件与页面关联起来，可以在中的manifest属性中指定这个文件的路径,例如:

以上代码告诉页面，/offline.manifest 中包含描述文件，这个文件的MIME类型必须是text/cache-manifest。

应用缓存的核心是applicationCache 对象,这个对象有一个status属性，属性的值是常量.

表示应用缓存的如下当前状态

0（UNCACHED）:  无缓存， 即没有与页面相关的应用缓存
1（IDLE）: 闲置，即应用缓存未得到更新
2（CHECKING）: 检查中，即正在下载描述文件并检查更新
3（DOWNLOADING）: 下载中，即应用缓存正在下载描述文件中指定的资源
4（UPDATEREADY）: 更新完成，所有资源都已下载完毕
5（IDLE）:  废弃，即应用缓存的描述文件已经不存在了，因此页面无法再访问应用缓存

表示应用缓存状态改变的相关的事件

`checking` : 在浏览器为应用缓存查找更新时触发
`error` : 在检查更新或下载资源期间发送错误时触发
`noupdate` : 在检查描述文件发现文件无变化时触发
`downloading` : 在开始下载应用缓存资源时触发
`progress`：在文件下载应用缓存的过程中持续不断地下载地触发
`updateready` : 在页面新的应用缓存下载完毕触发
`cached` : 在应用缓存完整可用时触发

3.数据缓存

(1) Cookie

cookie限制：

• IE 6 以及更低版本限制每个域名最多20个cookie.
• IE7 和之后版本每个域名最多50个.
• Firefox 限制每个域最多50个cookie.
• Opera限制每个域最多30个cookie.
• Safari和Chrome对于每个域的cookie数量限制没有硬性要求.

大多数浏览器都有大约4096b的cookie长度限制.

cookie 由浏览器保存以下几块信息构成

• 名称(name): 一个唯一确定cookie的名称。cookie名称是不区分大小写的，但实践中最好将该名字看作是区分大小写。
• 值(value): 存储在cookies的字符串值.eg:(name=value)
• 域: cookie对于哪个域是有效的。eg:(domain=.baidu.com)
• 路径: 指定只能从某个域的路径才能访问cookie eg:(path=/)
• 失效时间: cookie失效时间 eg:(expires=time)
• 安全标志: 指定后,cookie只有在使用SSL连接的时候才发送到服务器.eg:(secure)

document.cookie 可以获取cookie.返回的是一系列由分号隔开的名值对，这个属性的独特之处在于它会因为使用方式不同而表现为不同的行为。

可以通过封装代码使得操作更为便捷.

子cookie

为了绕开浏览器的单域名下cookie数限制，一些开发人员使用了一种称为子cookie的概念.子cookie是存放在单个cookie中的更小段数据，也就是使用cookie值来存储多个名称值对儿。

子cookie最常见的格式如下所示:

name = name1 = value1 & name2 = value2 & name3 = value3 & name4 = value4 & name5 = value5

可以通过封装代码使得操作更为便捷.

(2) Web 存储机制

WebStorage的目的是客服由cookie带来的一些限制，当数据需要被严格控制在客户端上时，无需持续地将数据发回服务器。

WebStorage 的两个主要目标是:

• 提供一种在cookie之外存储会话数据的途径;
• 提供一种存储大量可以跨会话存在的数据的机制;

最初的WebStroage 规范包含了两种对象的定义: sessionStorage 和 globalStorage.

1.Storage类型

Storage类型提供最大的存储空间（因浏览器而异）来存储名值对儿.Storage的实例与其他对象类似，有如下方法:

• clear():删除所有值;firefox中没有实现.
• getItem(name):根据指定的名字name获取对应的值.
• key(index):获得index位置处的值的名字.
• removeItem(name):删除由name指定的名值对儿.
• setItem(name, value):为指定的name设置一个对应的值.
  还可以用length属性来判断有多少名值对存放在Storage对象中.但无法判断对象中所有数据的大小.

2.sessionStorage类型

sessionStorage 对象存储特定于某个对话的数据，也就是该数据只保持到浏览器关闭。这个对象就像会话cookie,也会在浏览器关闭后消失.存储在sessionStorage中的数据可以跨越页面刷新而存在.
存储在sessionStorage中的数据只能由最初给对象存储数据的页面访问到,所以对多页面应用有限制.
因为sessionStorage对象其实是Storage的一个实例，所以可以使用setItem()或者直接设置新的属性来存储数据.

//存储数据
sessionStorage.setItem("name","Nicholas"); 
sessionStorage.book = "professional JavaScript";
//读取数据
var name = sessionStorage.getItem("name");
var book = sessionStorage.book;
//循环迭代sessionStorage的值
for (var key in sessionStorage){
  var value = sessionStorage.getItem(key);
}

3.globalStorage/localStorage类型

localStorage作为HTML5规范中持久保存客户端数据的方案取代了globalStorage.要访问同一个localStorage对象，页面必须来自同一个域名（子域名无效），使用同一种协议，在同一个端口上.

由于 localStorage 是 Storage 的实例，所以可以像使用 sessionStorage 一样来使用它。
存储在localStorage中的数据和存储在globalStorage中的数据一样，都遵循相同的规则：数据保留到通过JavaScript删除或者是用户清除浏览器缓存.

3.storage 事件

对Storage对象进行任何修改，都会在文档上触发Storage事件. 当通过属性或setItem()方法保存数据，使用delete操作符或removeItem()删除数据，或者调用clear()方法时，都会发生该事件。

这个事件event对象有以下属性:

• domain: 发生变化的存储空间域名。
• key: 设置或者删除的键名。
• newValue: 如果是设置值，则是新值；如果是删除键，则是null。
• oldValue: 键被更改之前的值。

4.限制

大部分桌面浏览器会设置每个来源5MB的限制. Chrome和Safari对来源的限制是2.5MB，而IOS版Safari和Android版WebKit的限制也是2.5MB.