Javascript-离线应用和客户端存储

一、离线检测

开发离线应用的第一步是要知道设备是在线还是离线，HTML5为此定义了一个navigator.onLine属性，这个属性值为true 表示设备能上网，值为false 表示设备离线。

if(navigator.onLine){
    //正常工作
}else{
    //执行离线状态时的工作
}

HTML5 还定义了两个事件：online 和offline。当网络从离线变为在线或者从在线变为离线时，分别触发这两个事件

二、应用缓存

HTML5 的应用缓存（application cache），或者简称为appcache，是专门为开发离线Web 应用而设计的。Appcache 就是从浏览器的缓存中分出来的一块缓存区。要想在这个缓存中保存数据，可以使用一个描述文件（manifest file），列出要下载和缓存的资源。

三、数据存储

1、Cookie

2、IE用户数据

3、Web存储机制

Web Storage 的目的是克服由cookie 带来的一些限制，当数据需要被严格控制在客户端上时，无须持续地将数据发回服务器。Web Storage 的两个主要目标是：
提供一种在cookie 之外存储会话数据的途径；
提供一种存储大量可以跨会话存在的数据的机制。

• Storage类型
  Storage 类型提供最大的存储空间（因浏览器而异）来存储名值对儿。Storage 的实例与其他对象类似，有如下方法。
  clear()： 删除所有值；Firefox 中没有实现 。
  getItem(name)：根据指定的名字name 获取对应的值。
  key(index)：获得index 位置处的值的名字。
  removeItem(name)：删除由name 指定的名值对儿。
  setItem(name, value)：为指定的name 设置一个对应的值。
• sessionStorage对象：
  sessionStorage 对象存储特定于某个会话的数据，也就是该数据只保持到浏览器关闭。这个对象就像会话cookie，也会在浏览器关闭后消失。存储在sessionStorage 中的数据可以跨越页面刷新而存在，同时如果浏览器支持，浏览器崩溃并重启之后依然可用（Firefox 和WebKit 都支持，IE 则不行）。

//使用方法存储数据
sessionStorage.setItem("name", "Tom");
// 使用属性存储数据
sessionStorage.book = "Professional JavaScript";

• globalStorage对象
  这个对象的目的是跨越会话存储数据，但有特定的访问限制。要使用globalStorage，首先要指定哪些域可以访问该数据。可以通过方括号标记使用属性来实现，如以下例子所示。

globalStorage["wrox.com"].name = "Tom";
var name = globalStorage["wrox.com"].name;

• localStorage对象
  localStorage 对象在修订过的HTML 5 规范中作为持久保存客户端数据的方案取代了globalStorage。与globalStorage 不同，不能给localStorage 指定任何访问规则；规则事先就设定好了。要访问同一个localStorage 对象，页面必须来自同一个域名（子域名无效），使用同一种协议，在同一个端口上。这相当于globalStorage[location.host]。

localStorage.setItem("name", "Tom");
localStorage.book = "Professional JavaScript";
var name = localStorage.getItem("name");
var book = localStorage.book;

• Sorage事件
  对Storage 对象进行任何修改，都会在文档上触发storage 事件。当通过属性或setItem()方法保存数据，使用delete 操作符或removeItem()删除数据，或者调用clear()方法时，都会发生该事件。这个事件的event 对象有以下属性。
  •domain：发生变化的存储空间的域名。
  •key：设置或者删除的键名。
  •newValue：如果是设置值，则是新值；如果是删除键，则是null。
  •oldValue：键被更改之前的值。

4、IndexedDB