HTML5离线应用与客户端存储的实现

1、html5离线应用与客户端存储的实现支持离线web应用开发是html5的另一个重点。所谓离线web应用，就是在设备不能上网的状况下仍然可以运行的应用。开发离线web应用需要几个步骤。首先是确保应用知道设备是否能上网，以便下一步执行正确的操作。然后，应用还必需能拜访一定的资源（图像、javascript、css等），惟独这样才干正常工作。最好，必需有一块本地空间用户保存数据，无论能否上网都不阻碍读写。html5及其相关的api让开发离线应用成为现实。离线检测要知道设备是否在线还是离线，html5定义了一个navigator.online属性，这个属性值为true表示设备能上网，值为false表示

2、设备离线。if(navigator.online)/正常工作else/执行离线状态时的任务因为navigator.online存在一定的兼容性问题，因此除了navigator.online属性之外，为了更好地确定网络是否可用，html5还定义了两个大事online和offline。当网络在离线和在线之间切换时在window对象上触发这两个大事：window.addeventlistener(&39;online&39;,function()/正常工作);window.addeventlistener(&39;offline&39;,function()/执行离线状态时的任务);在实际应用中，最

3、好在页面加载后，最好先通过navigator.online取得初始的状态。然后通过上述两个大事来确定网络衔接状态是否变幻。当上述大事触发时，navigator.online属性的值也会转变，不过必需要手工轮询这个属性才干检测到网络状态的变幻。应用缓存html5的应用缓存（applicationcache），或者简称为appcache，是特地为开发离线web应用而设计的。appcache就是从扫瞄器的缓存中分出来的一块缓存区。要想在这个缓存中保存数据，可以用法一个描述文件（manifestfile），列出要下载和缓存的资源。描述文件示例：cachemanifestcommentfile.jsfi

4、le.css然后在html中引用：xxx.manifest文件的mime类型必需是text/cache-manifest。该api的核心是applicationcache对象，这个对象有一个status属性，属性的值是常量，表示应用缓存的如下当前状态：0：无缓存，即没有与页面相关的应用缓存1：闲置，即应用缓存未得到更新2：检查中，即正在下载描述文件并检查更新3：下载中，即应用缓存正在下载描述文件中指定的资源4：更新完成，即应用缓存已经更新了资源，而且全部资源都已下载完毕，可以通过swapcache()来用法了5：废弃，即应用缓存的描述文件已经不存在了，因此页面无法再拜访应用缓存相关大事：che

5、cking：在扫瞄器为应用缓存查找更新时触发error：在检查更新或者下载资源期间发生错误时触发noupdate：在检查描述文件发觉文件无变幻时触发downloading：在开头下载应用缓存资源时触发progress：在文件下载应用缓存的过程中持续不断地触发updateready：在页面新的应用缓存下载完毕且可以通过swapcache()用法时触发cached：在应用缓存完整可用时触发普通来讲，这些大事会随着页面加载按上述挨次依次触发。也可以通过调用update()办法手动触发上述大事。数据存储cookiehttpcookie，通常挺直叫做cookie，是在客户端用于存储会话信息的。该标准要求

6、服务器对随意http哀求发送set-cookiehttp头信息作为响应的一部分，其中包含会话信息。服务器响应头示例：http/1.1200okcontent-type:text/htmlset-cookie:name=valueother-header:other-header-value然后扫瞄器set-cookie的会话信息，之后为每个哀求添加cookiehttp头将信息发送回服务器，如下所示：get/index.htmlhttp/1.1cookie:name=valueother-header:other-header-value发送回服务器的额外信息可以用于唯一验证客户来自于发送的哪个

7、哀求。完整的cookie包括：名称：一个唯一确定cookie的名称。必需被url编码。值：存储在cookie中的字符串值。必需被url编码。域：cookie对于哪个域是有效的。路径：对于指定域中的那个路径，应当向服务器发送cookie。失效时光：表示cookie何时应当被删除的时光戳。平安标记：指定后，cookie惟独在用法ssl衔接的时候才发送到服务器。复制代码代码如下:set-cookie：name=value;domain=;path=/;expires=mon,29oct201803:53:10gmt;secure;基本使用在javascript中操作cookie有些复杂，这是由于do

8、cument.cookie属性在不同的用法方式中表现出不同的行为。当用来猎取属性值时，document.cookie返回当前页面可用的全部cookie字符串，一系列由分号隔开的键值对，如下所示：document.cookie/name1=value1;name2=value2;name3=value3;当用来设置值时，document.cookie属性会设置一个新的cookie字符串添加到现有的cookie集合中，并不会像一般对象设置属性一样笼罩原cookie的值，除非设置的cookie的名称已经存在，如下所示：/cookie的名称不存在document.cookie=&39;name4=va

9、lue4&39;/name1=value1;name2=value2;name3=value3;name4=value4;/而不是name4=value4;/cookie的名称存在document.cookie=&39;name3=value4&39;/name1=value1;name2=value2;name3=value4;从上面的代码我们可以看出，我们要读取或者修改或者删除指定cookie的值都不是很直观便利，因此我们可以封装一些办法，便利我们对cookie的操作：varcookieutil=get:function(name)varcookiename=encodeuricompon

10、ent(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+cookie

11、name.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(do

12、main)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(&39;name&39;,&39;lai&39;);cookieutil.set(&39;sex&39;,&39;man&3

13、9;);/读取cookiecookieutil.get(&39;name&39;);/&39;lai&39;cookieutil.get(&39;sex&39;);/&39;man&39;/删除cookiecookieutil.unset(&39;name&39;);cookieutil.unset(&39;sex&39;);/设置cookie，包括它的路径、域、失效日期cookieutil.set(&39;name&39;,&39;lai&39;,&39;/&39;,&39;&39;,newdate();大小限制每个域的cookie总数是有限，不同扫瞄器之间全部不同，ie6以下是最多20个，

14、ie7以上最多50个，firefox最多50个，opera最多30个，safari和chrome不限制。cookie的尺寸也有限制，大多数扫瞄器有大约4096b。webstoragewebstorage的目的是克服由cookie带来的一些限制，当数据需要被严格控制在客户端上时，无须持续地将数据发回服务器。webstorage的两个主要目标是：提供一种在cookie之外存储会话数据的路径。提供一种存储大量可以跨会话存在的数据的机制。webstorage主要定义了两种对象：sessionstorage和localstorage，是storage对象的实例，这两个对象区分如下：sessionstor

15、age：存储特定于某个会话的数据，也就是该数据只保持到扫瞄器关闭。存储数据大小大多数限制在2.5m，少数扫瞄器限制在5m或者不限制。localstorage：数据保存到通过javascript删除或者是用户清除扫瞄器缓存。存储数据大小大多数限制在5m，少数扫瞄器限制在2.5m或者不限制。storage类型有如下办法：clear()：删除全部值。getitem(name)：按照指定的名字name猎取对应的值。key(index)：猎取index位置处的值的名字。removeitem(name)：删除由name指定的键值对。setitem(name,value)：为指定的name设置一个对应的值，

16、值为字符串。对sessionstorage和localstorage举行操作都会触发storage大事，该大事对象有以下属性：domain：发生变幻的存储空间的域名。key：设置或者删除的键名。newvalue：假如是设置值，则是新值；假如是删除键，则是null。oldvalue：键被更改之前的值。indexeddbindexeddatabaseapi，简称为indexeddb，是在扫瞄器中保存结构化数据的一种数据库。其思想是创建一套api，便利保存和读取javascript对象，同时还支持查询和搜寻。indexeddb设计的操作彻低是异步举行的。因此，大多数操作会以哀求方式举行。基本使用va

17、rindexeddb=window.indexeddb|window.msindexeddb|window.mozindexeddb|window.webkitindexeddb,/猎取indexeddbrequest,store,database,users=username:"007",firstname:"james",lastname:"bond",password:"foo",username:"ace",firstname:"john",lastname:&quo

18、t;smith",password:"bar"/打开数据库request=indexeddb.open("example");/注册onerror及onsuccess大事request.onerror=function(event)alert("somethingbadhappenedwhiletryingtoopen:"+event.target.errorcode);request.onsuccess=function(event)database=event.target.result;/操作数据库initialize

19、database();functioninitializedatabase()if(database.version!="1.0")/设置数据库版本号request=database.setversion("1.0");request.onerror=function(event)alert("somethingbadhappenedwhiletryingtosetversion:"+event.target.errorcode);request.onsuccess=function(event)/用法users创建对象存储空间store=database.createobjectstore("users",keypath:"username");va