JavaScript 离线与存储

离线检测

// navigator.online属性
if (navigator.online){
  // 正常工作
} else {
  // 执行离线状态时的任务
}

// online offline事件
EventUtil.addHandler(window, "online", function(){
  alert("Online");
})
EventUtil.addHandler(window, "offline", function(){
  alert("Offline");
})

应用缓存

applicationCache对象，status属性：

• 0：无缓存，即没有与页面相关的应用缓存；
• 1：闲置，即应用缓存未得到更新；
• 2：检查中，即正在下载描述文件并检查更新；
• 3：下载中，即应用缓存正在下载描述文件中指定的资源；
• 4：更新完成，即应用缓存已经更新了资源，而且所有资源都已下载完毕，可以通过swapCache()来使用了；
• 5：废弃：即应用缓存的描述文件已经不存在，因此页面无法在访问应用缓存；

事件：

• checking：在浏览器为应用缓存查找更新时触发；
• error：在检查更新或下载资源期间发生错误时触发；
• noupdate：在检查妙手文件发现文件无变化时触发；
• downloading：在开始下载应用缓存资源时触发；
• progress：在文件下载应用缓存的过程中持续不断地触发；
• updateready：在页面新的应用缓存下载完毕并且可以通过swapCache()使用时触发；
• cached: 在应用缓存完整可用时触发

数据存储

HTTP Cookie，通常直接叫做Cookie，最初是在客户端用于存储回话信息的。该标准要求服务器对任意HTTP请求发送Set-Cookie HTTP头座位响应的一部分，其中包含回话信息。

HTTP/1.1 200 OK
Content-TYpe: text/html
Set-Cookie: name=value; expires=Mon, 22-Jan-07 07:10:24 GMT; domain=.wrox.com
Other-header: other-header-value

1. 限制

cookie在性质上是绑定在特定的域名下的。当设定一个cookie后，再给创建它的域名发送请求时，都会包含这个cookie。

2. cookie的构成

名称/值/域/路径/失效时间/安全标志

3. 子cookie

绕开浏览器的单域名下的cookie数量限制，子cookie是存放在单个cookie中的更小段数据。也就是cookie值来存储多个键值对。

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

子cookie一般也以查询字符串的格式进行格式化。然后这些值可以使用单个cookie进行存储和访问，而非每个键值对使用不同的cookie存储。

IE用户数据

在IE5.0中，微软通过一个自定义行为引入了持久化用户数据的概念。永辉数据允许每个文档最多128kb数据，每个域名最多1MB数据。

var dataStor = document.getElementById("dataStore");
dataStore.setAttribute("name", "张三");
dateStore.setAttribute("book", "书名");
dataStore.save("BookInfo");
dataStore.load("BookInfo");

dataStore.getAttribute("name");

Web存储机制

Web Storage 最早是在web超文本应用技术工作组(WHAT-WG)的Web应用1.0规范中描述的。这个规范最初的工作最终成为了HTML5的一部分。主要目标有两个：

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

最初的Web Storage规范包含了两种对象的定义：sessionStorage和globalStorage。这两个对象在支持的浏览器中是以windows对象属性的形式存在的。

1. Storage类型

clear(): 删除所有值
getItem(name): 根据指定的名字那么获取对象的值
key(index): 获得index位置处的值得名字
removeItem(name): 喊出有那么指定名值对
setItem(name,value):为指定的名值对设置一个对应的值。

2. sessionStorage

seeionStorage对象存储特定于某个回话的数据，也就是该数据只保持浏览器关闭。这个对象就像回话cookie，也会在浏览器关闭后消失。

3. globalStorage对象

具备同源策略限制。

// 保存数据
globalStorage["wrox.com"].name = "张三";
// 获取数据
var name = globalStorage["wrox.com"].name;

4. localStorage对象

localStorage对象在修订过的HTML5规范中作为持久保存客户端数据的方案取代了globalStorage。与globalStorage不同，不能给localStorage指定任何访问规则，规则事先就设定好了。要访问一个localStorage对象，页面必须来自同一个域名(子域名无效)，使用同一种协议，在同一个端口上。

// 使用方法存储数据
localStorage.setItem("name","张安");
// 使用属性存储数据
localStorage.book = "book";
// 使用方法读取数据
var name = localStorage.getItem("name");
// 使用属性读取数据
var book = localStorage.book;

存储在localStorage中的数据和存储globalStorage中的数据一样，都遵循相同的规则：数据保留到通过JavaScript删除或者用户清楚浏览器缓存。

5. Storage事件

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

6. 限制

大多数桌面浏览器设置每个来源5MB的限制。Chrome和Safari对每个来源的限制是2.5MB。