支持离线web应用开发是html5的一个重点之一，在设备不能上网的情况下仍可以运行相关应用，本文和大家分享的就是html5离线应用与客户端存储相关内容，一起来看看吧，希望对大家学习html5有所帮助。
开发离线Web应用需要几个步骤。首先是确保应用知道设备是否能上网，以便下一步执行正确的操作。然后，应用还必须能访问一定的资源（图像、Javascript、CSS等），只有这样才能正常工作。最好，必须有一块本地空间用户保存数据，无论能否上网都不妨碍读写。
HTML5及其相关的API让开发离线应用成为现实。
离线检测
要知道设备是否在线还是离线，HTML5定义了一个navigator.onLine属性，这个属性值为true表示设备能上网，值为false表示设备离线。
if(navigator.onLine) {
//正常工作
}else{
//执行离线状态时的任务
}
由于navigator.onLine存在一定的兼容性问题，因此除了navigator.onLine属性之外，为了更好地确定网络是否可用，HTML5还定义了两个事件online和offline。
当网络在离线和在线之间切换时在window对象上触发这两个事件：
window.addEventListener(’online’,function() {
//正常工作
});
window.addEventListener(’offline’,function() {
//执行离线状态时的任务
});
在实际应用中，最好在页面加载后，最好先通过navigator.onLine取得初始的状态。然后通过上述两个事件来确定网络连接状态是否变化。当上述事件触发时，navigator.onLine属性的值也会改变，不过必须要手工轮询这个属性才能检测到网络状态的变化。
应用缓存
HTML5的应用缓存（application cache），或者简称为appcache，是专门为开发离线Web应用而设计的。Appcache就是从浏览器的缓存中分出来的一块缓存区。要想在这个缓存中保存数据，可以使用一个描述文件（manifest file），列出要下载和缓存的资源。描述文件示例：
CACHE MANIFEST# Comment
file.jsfile.css
然后在html中引用：
<htmlmanifest="./xxx.manifest">
xxx.manifest文件的MIME类型必须是text/cache-manifest。
该API的核心是applicationCache对象，这个对象有一个status属性，属性的值是常量，表示应用缓存的如下当前状态：
·0：无缓存，即没有与页面相关的应用缓存
·1：闲置，即应用缓存未得到更新
·2：检查中，即正在下载描述文件并检查更新
·3：下载中，即应用缓存正在下载描述文件中指定的资源
·4：更新完成，即应用缓存已经更新了资源，而且所有资源都已下载完毕，可以通过swapCache()来使用了
·5：废弃，即应用缓存的描述文件已经不存在了，因此页面无法再访问应用缓存
相关事件：
·checking：在浏览器为应用缓存查找更新时触发
·error：在检查更新或者下载资源期间发生错误时触发
·noupdate：在检查描述文件发现文件无变化时触发
·downloading：在开始下载应用缓存资源时触发
·progress：在文件下载应用缓存的过程中持续不断地触发
·updateready：在页面新的应用缓存下载完毕且可以通过swapCache()使用时触发
·cached：在应用缓存完整可用时触发
一般来讲，这些事件会随着页面加载按上述顺序依次触发。也可以通过调用update()方法手动触发上述事件。
数据存储
Cookie
HTTP Cookie，通常直接叫做cookie，是在客户端用于存储会话信息的。该标准要求服务器对任意HTTP请求发送Set-Cookie HTTP头信息作为响应的一部分，其中包含会话信息。服务器响应头示例：
HTTP/1.1 200 OKContent-type: text/htmlSet-Cookie: name=valueOther-header: other-header-value
然后浏览器Set-Cookie的会话信息，之后为每个请求添加Cookie HTTP头将信息发送回服务器，如下所示：
GET/index.html HTTP/1.1Cookie: name=valueOther-header: other-header-value
发送回服务器的额外信息可以用于唯一验证客户来自于发送的哪个请求。
完整的cookie包括：
·名称：一个唯一确定cookie的名称。必须被URL编码。
·值：存储在cookie中的字符串值。必须被URL编码。
·域：cookie对于哪个域是有效的。
·路径：对于指定域中的那个路径，应该向服务器发送cookie。
·失效时间：表示cookie何时应该被删除的时间戳。
·安全标志：指定后，cookie只有在使用SSL连接的时候才发送到服务器。
Set-Cookie：name=value; domain=www.laixiangran.cn; path=/; expires=Mon, 29 Oct 2018 03:53:10 GMT; secure;
基本用法
在JavaScript中操作cookie有些复杂，这是因为document.cookie属性在不同的使用方式中表现出不同的行为。
当用来获取属性值时，document.cookie返回当前页面可用的所有cookie字符串，一系列由分号隔开的键值对，如下所示：
document.cookie
// name1=value1;name2=value2;name3=value3;
当用来设置值时，document.cookie属性会设置一个新的cookie字符串添加到现有的cookie集合中，并不会像普通对象设置属性一样覆盖原cookie的值，除非设置的cookie的名称已经存在，如下所示：
// cookie的名称不存在
document.cookie = ’name4=value4’
// name1=value1;name2=value2;name3=value3;name4=value4;
//而不是name4=value4;
// cookie的名称存在document.cookie = ’name3=value4’
// name1=value1;name2=value2;name3=value4;
从上面的代码我们可以看出，我们要读取或者修改或者删除指定cookie的值都不是很直观方便，因此我们可以封装一些方法，方便我们对cookie的操作：
varCookieUtil = {
get:function(name) {
varcookieName = encodeURIComponent(name) + "=",
cookieStart = document.cookie.indexOf(cookieName),
cookieValue = null,
cookieEnd;
if(cookieStart > -1) {
cookieEnd = document.cookie.indexOf(";", cookieStart);
if(cookieEnd == -1) {
cookieEnd = document.cookie.length;
}
cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
}
returncookieValue;
},
set:function(name, value, expires, path, domain, secure) {
varcookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);
if(expiresinstanceofDate) {
cookieText += "; expires=" + expires.toGMTString();
}
if(path) {
cookieText += "; path=" + path;
}
if(domain) {
cookieText += "; domain=" + domain;
}
if(secure) {
cookieText += "; secure";
}
document.cookie = cookieText;
},
unset:function(name, path, domain, secure) {
this.set(name, "",newDate(0), path, domain, secure);
}
};
使用方法：
//设置cookieCookieUtil.set(’name’, ’lai’);CookieUtil.set(’sex’, ’man’);
//读取cookieCookieUtil.get(’name’); // ’lai’CookieUtil.get(’sex’); // ’man’
//删除cookieCookieUtil.unset(’name’);CookieUtil.unset(’sex’);
//设置cookie，包括它的路径、域、失效日期CookieUtil.set(’name’, ’lai’, ’/’, ’www.laixiangran.cn’, new Date());
大小限制
·每个域的cookie总数是有限，不同浏览器之间所有不同，IE6以下是最多20个，IE7以上最多50个，Firefox最多50个，Opera最多30个，Safari和Chrome不限制。
· cookie的尺寸也有限制，大多数浏览器有大约4096B。
Web Storage
Web Storage的目的是克服由cookie带来的一些限制，当数据需要被严格控制在客户端上时，无须持续地将数据发回服务器。Web Storage的两个主要目标是：
·提供一种在cookie之外存储会话数据的路径。
·提供一种存储大量可以跨会话存在的数据的机制。
Web Storage主要定义了两种对象：sessionStorage和localStorage，是Storage对象的实例，这两个对象区别如下：
·sessionStorage：存储特定于某个会话的数据，也就是该数据只保持到浏览器关闭。存储数据大小大多数限制在2.5M，少数浏览器限制在5M或者不限制。
·localStorage：数据保存到通过JavaScript删除或者是用户清除浏览器缓存。存储数据大小大多数限制在5M，少数浏览器限制在2.5M或者不限制。
Storage类型有如下方法：
·clear()：删除所有值。
·getItem(name)：根据指定的名字name获取对应的值。
·key(index)：获取index位置处的值的名字。
·removeItem(name)：删除由name指定的键值对。
·setItem(name, value)：为指定的name设置一个对应的值，值为字符串。
对sessionStorage和localStorage进行操作都会触发storage事件，该事件对象有以下属性：
·domain：发生变化的存储空间的域名。
·key：设置或者删除的键名。
·newValue：如果是设置值，则是新值；如果是删除键，则是null。
·oldValue：键被更改之前的值。
IndexedDB
Indexed Database API，简称为IndexedDB，是在浏览器中保存结构化数据的一种数据库。其思想是创建一套API，方便保存和读取JavaScript对象，同时还支持查询和搜索。
IndexedDB设计的操作完全是异步进行的。因此，大多数操作会以请求方式进行。
基本用法
varindexedDB = window.indexedDB || window.msIndexedDB || window.mozIndexedDB || window.webkitIndexedDB, //获取indexedDB
request,
store,
database,
users = [
{
username: "007",
firstName: "James",
lastName: "Bond",
password: "foo"
},
{
username: "ace",
firstName: "John",
lastName: "Smith",
password: "bar"
}
];
//打开数据库
request = indexedDB.open("example");
//注册onerror及onsuccess事件
request.onerror =function(event) {
alert("Something bad happened while trying to open: " + event.target.errorCode);
};
request.onsuccess =function(event) {
database = event.target.result;
//操作数据库
initializeDatabase();
};
functioninitializeDatabase() {
if(database.version != "1.0") {
//设置数据库版本号
request = database.setVersion("1.0");
request.onerror =function(event) {
alert("Something bad happened while trying to set version: " + event.target.errorCode);
};
request.onsuccess =function(event) {
//使用users创建对象存储空间
store = database.createObjectStore("users", {keyPath: "username"});
vari = 0,
len = users.length;
while(i < len) {
//插入新值
store.add(users[i++]);
}
alert("Database initialized for first time. Database name: " + database.name + ", Version: " + database.version);
};
}else{
alert("Database already initialized. Database name: " + database.name + ", Version: " + database.version);
// transaction()创建事务，objectStore()将存储空间传入事务
request = database.transaction("users").objectStore("users").get("007");
request.onsuccess =function(event) {
alert(event.target.result.firstName);
};
}
}
限制
·和Web Storage类似，只能由同源（相同协议、域名和端口）页面操作，因此不能跨域共享信息。
· Firefox大小上限为50M，移动端的Firefox大小上限为5M，不允许本地文件访问。
· Chrome大小上限为5M，允许本地文件访问。
来源：网络
Html5学习之离线应用与客户端存储详解