前端开发

离线应用于客户端存储

支持离线Web应用开发是HTML5的另一个重点。开发离线Web应用需要几个步骤。首先要确保知道设备是否能上网。然后，应用还必须能访问一定的资源。最后，必须有一块本地空间用于保存数据，无论能否上网都不妨碍读写。

离线检测

HTML5定义了一个navigator.online属性，true表示能上网，false表示设备离线。以下是检测属性状态的示例。

1
2
3
4
5
if(navigator.online){
	//正常工作
}else {
	//执行离线状态时的任务
}

此外，HTML5还定义了两个事件：onlin和offline。分别在网络离线变在线和在线变离线时触发。

应用缓存

HTML5的应用缓存可以简称为appcache，是专门为开发离线Web应用而设计的。Appcache是从浏览器的缓存中分出来的一块缓存区。可以使用一个描述文件，列出要下载和缓存的资源，就可以将相应的资源存储到这个区域。
要将描述文件与页面关联起来，可以在< html >中的manifest属性中指定这个描述文件的路径。

数据存储

随着Web应用程序的出现，也产生了对于能够直接在客户端上存储用户信息能力的要求。一下为几种客户端存储数据的方式。

HTTP Cookie，最初是在客户端用于存储会话信息的。由于HTTP是一种无状态的协议，服务器单从网络连接上无从知道客户身份，所以可以使用cookie作为身份标识，服务器就能确认用户身份了。该标准要求服务器对任意HTTP请求发送Set-Cookie HTTP头最为相应的一部分，其中包含会话信息。
cookie有访问者限制，有长度限制，每个域的cookie总数也有限制。cookie由浏览器保存到额以下几块信息构成：名称、值、域、路径、失效时间、安全标志等。
在JavaScript中处理cookie有些复杂，因为其蹩脚的接口，即BOM的document.cookie属性。这个属性的独特之处在于它会因为使用它的方式不同而表现不同的行为。基本的cookie操作有三种：读取、写入和删除。

Session机制

除了使用Cookie，Web应用程序中还经常使用Session来记录客户端状态。Session是服务器端使用的一种记录客户端状态的机制，使用上比Cookie简单一些，相应的也增加了服务器的存储压力。Session是另一种记录客户状态的机制，不同的是Cookie保存在客户端浏览器中，而Session保存在服务器上。客户端浏览器访问服务器的时候，服务器把客户端信息以某种形式记录在服务器上。这就是Session。

IE用户数据

在IE5.0中，微软通过一个自定义行为引入了持久化用户数据的概念。要使用持久化用户数据，就必须使用CSS在某个元素上指定userData行为，该元素即可使用setAttribute()方法在上面保存数据了。为了将数据提交到浏览器缓存中，还必须调用save()方法并告诉它要保存到的数据空间的名字。如下：

1
2
3
4
5
6
7
<div style="behavior:url(#default#userData)" id="dataStore"></div>

dataStore = setAttribute("name","liming");
dataStore = setAttribute("sex","men");
dataStore.save("staffInfo"); //存储

dataStore1.load("staffInfo"); //调用，加载。staffInfo的信息就会加载到dataStore1中

Web存储机制（更大容量存储）

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

  • Storage类型提供最大的存储空间来存储名值对儿，但只能存储字符串。Storage的实例有以下方法：clear()、getItem(name)、key(index)、removeItem(name)、setItem(name,value)，此外还有length等属性。
  • sessionStorage对象。非持久存储，用于存储特定于某个会话的数据，也就是该数据只保持到浏览器关闭。
  • globalStorage对象。其目的是跨越会话存储数据，但有特定的访问限制。要使用它，首先指定哪些域可以访问该数据，可以通过方括号来标记使用属性来实现。globalStorage的每个属性都是Storage的实例。
1
2
globalStorage["www.wrox.com"].name="Nicholas";
var name = globalStorage["www.wrox.com"].name; //取数据

它会一直保存在磁盘上，所以非常适合在客户端存储文档或者长期保持用户票号设置。

  • localStorage对象
    localStorage对象在修订过的HTML5规范中作为持久保存客户端数据的方案取代了globalStorage。
1
2
3
4
localStorage.setItem("name","liming"); //使用方法存储数据
var name = localStorage.getItem("name");
localStorage.age=22; //使用属性存储数据
var age=localStorage.age;
  • storage事件。对Storage对象进行任何修改，都会在文档上触发storage事件。该event事件有这几个属性：domain（发生变化的存储空间的域名）、key（设置或删除的键名）、newValue、oldValue。

IndexedDB

Indexed Database API，是在浏览器中保存结构化数据的一种数据库。其思想是创建一套API，方便保存和读取JavaScript对象，同时还支持查询及搜索。IndexedDB设计的操作完全是异步进行的。因此，大多数操作会以请求方式进行，但这些操作会在后期执行。差不多每次IndexedDB操作，都需要注册onerror或onsuccess事件处理程序，以确保适当地处理结果。
它是一种类似SQL数据的结构haunted数据存储机制，但它的数据不是保存在表中，而是保存在对象存储空间中。创建对象存储空间时，需要定义一个键，然后就可以添加数据。可以使用游标在对象存储空间中查询特定的对象。而索引则是为了提高查询速度而基于特定的属性创建的。

cookie作为HTTP协议的一部分用来处理客户端和服务器通信是不可或缺的，WebStorage的意图在于解决本来不应该cookie做，却不得不用cookie的本地存储。共同点：保存在浏览器用户端，且都是同源的。（golbalStorage可以不同源）

  • 网络负担：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。
  • 存储大小限制不同：cookie有大小和数目的限制，sessionStorage和localStorage属于Web Storage，则用于更大容量的存储，如chrome每个来源限制为2.5M。
  • 安全性：HTTP请求中的cookie是明文传递的（https不是），WebStorage并不作为HTTP header发送的浏览器，所以相对安全。
  • 使用方便：cookie需要前端开发者自己封装setCookie，getCookie，而Web Storage则拥有setItem、getItem等方法。
  • 数据有效期：cookie有失效时间。sessionStorage用于非持久存储，用于存储会话数据，浏览器关闭即销毁。localStorage用于持久存储，访问时，页面也localStorage必须来自同一个域名。
  • 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。
  • Web Storage 支持事件通知机制，可以将数据更新的通知发送给监听者。Web Storage 的 api 接口使用更方便。