欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

JavaScript离线应用和客户端存储知识详解

程序员文章站 2022-05-22 09:49:13
1.进行离线检测: 支持离线web应用开发是html5的一个重点。所谓离线,就是设备再不能上网的情况下仍然可以运行应用。html5把离线应用作为重点。 开发离线web应用需要几...

1.进行离线检测:

支持离线web应用开发是html5的一个重点。所谓离线,就是设备再不能上网的情况下仍然可以运行应用。html5把离线应用作为重点。

开发离线web应用需要几个步骤:首先确保应用知道设备是否能上网,以便下一步执行正确的操作。然后,应用还必须能访问一定的资源(图像,javascript,css等),只有这样才能正常工作。最后,必须有一块本地空间用于保存数据。无论是否上网都不妨碍读写。

开发离线的第一步就是知道设备是在线还是离线,html5定义一个属性:navigator.online的属性。这个属性值为true,表示设备在线,值为false,表示设备离线。为了更好的确定网络是否可用,html5还定义了两个事件。这两个事件是在window对象上触发:online和offline。代码如下:

JavaScript离线应用和客户端存储知识详解

2.应用缓存:

html5的应用缓存:appcache,专门为开发离线web应用而设计的。appcache就是从的缓存中分出来的一块缓存区。要想在这个缓存区中保存数据,可以使用一个描述文件(manifest file),列出要下载和缓存的资源。其实这个主要的api是applicationcache对象。

这个对象有一个status属性,属性的值是常量,表示应用缓存的如下状态:

0:无缓存,即没有与页面相关的应用缓存。

1:闲置,即应用缓存未得到更新

2:检查中,即应用缓存正在下载描述文件中指定的资源

3:下载中,即应用缓存正在下载描述文件中指定的资源

4:更新完成,即应用缓存已经更新资源,而且所有的资源都已经全部下载完毕。可以通过swapcache()来使用。

5:废弃:即应用缓存的描述文件已经不存在了。因此页面无法再访问应用缓存。

应用缓存还有很多相关的事件,表示其状态的改变,以下就是这些事件:

checking:在浏览器为应用缓存查找更新时触发。

error:在检查更新或者下载资源的期间发生错误时触发

onupdate:在检查描述文件发现文件无变化时触发。

downloading:再开始下载应用缓存资源时触发

progress:在文件下载应用缓存过程中持续不断的触发。

updateready:在页面新的应用缓存下载完毕并且可以通过swapcache()使用时触发。

cached:在应用缓存完整可用时触发。

一般来讲:这些事件会随着页面加载按上述顺序依次触发,不过,通过调用update方法也可以手工干预,让应用缓存为检查更新而触发上述事件。

applicationcache.update()

update()一经调用,应用缓存就会去检查描述文件是否更新(触发checking事件),然后像页面刚刚加载一样,继续执行后续操作,如果触发了cached事件,说明应用缓存已经准备就绪,不会再发生其它操作了。如果触发了updateready事件,则说明新版本应用缓存已经可用。而此时你需要调用swapcache()来启用新的缓存。

eventutil.addhandler(applicationcache,"updateready",function(params) { applicationcache.swapcache();});

3.数据存储:

提供数据存储的有以下方式:cookie,web storage,indexeddb等

cookie相关的知识,网上有很多资源,我就不再详细的介绍。

web storage:包含了两种对象的定义:sessionstorage和globalstorage(后来被localstorage)。

①.sessionstorage:

sessionstorage对象存储特定的某个会话数据,也就是该数据只能保持到浏览器关闭。这个对象就像会话cookie,也会在浏览器关闭后消失。由于sessionstorage对象其实是storage的一个实例,所以可以使用setitem()或者直接设置新的属性来存储数据:以下就是两种方法:

// 使用方法存储数据sessionstorage.setitem("name","zhanghuiqi");// 使用属性存储数据sessionstorage.book = "javascript";

sessionstorage中有数据,可以使用getitem()或者通过直接访问属性名来或许数据:

JavaScript离线应用和客户端存储知识详解

还可以通过结合length和key方法来迭代sessionstorage中的值:

JavaScript离线应用和客户端存储知识详解

要从sessionstorage删除数据可以使用:

// 使用delete删除一个值delete sessionstorage.name;// 使用方法删除一个值:sessionstorage.removeitem("book");

sessionstorage只适用于针对会话的小段数据,如果需要跨越会话存储数据,那么globalstorage或者localstorage更为合适。

②.localstorage对象:

作为持久保存客户端数据的方案。存储在localstorage中的数据保留到通过javascript删除或者是用户清除浏览器缓存。

JavaScript离线应用和客户端存储知识详解

③storage事件:

对storage对象进行任何修改,都会在文档上触发storage事件,当通过属性或者setitem()方法保存数据,或者使用delete操作符或者removeitem()删除数据,或者使用clean()方法时,都会触发该事件,这个事件的event对象有以下属性:

domain:发生变化的存储空间的域名

key:设置或者删除的键名

newvalue:如果设置值,则是新值,如果是删除键,则是null

oldvalue:键被更改之前的值

无论对sessionstorage,localstorage进行操作都会触发storage事件,代码如下:

window.addeventlistener("storage",function (event) { alert('storage changed for'+event.domain); });

上述代码很容易犯的错误是,在同一个网页修改本地存储,又在同一个网页监听,这样是没有效果的。

需要将上面两个网页保存,放到同一个服务器上,然后,先打开a.html,再打开b.html。就会看到a.html会弹出提示框。注意两个网页要同源。

对这个事件解释不错的一个帖子:点击打开链接

4.indexeddb的介绍和使用:

是在浏览器中保存结构化数据的一种。indexeddb是为了替代目前已被废弃的web sql database api而出现的。indexeddb的思想是想创建一套api,方便保存和读取javascript对象,同事还支持查询和搜索。

indexeddb的设计操作完全是异步操作的。因此,大多数操作都是以请求的方式进行。但这些操作会后期执行。然后如果成功,则返回结果。如果失败,则返回错误,差不多每一次的indexeddb操作,都需要你注册onerror或者onsuccess事件处理程序,以确保适当地处理结果。

indexeddb最大的特点就是使用对象保存数据。而不是使用表保存数据。

使用indexeddb第一步就是打开它,即要把打开的数据库名传递给indexdb.open().调用indexdb.open返回的是一个idbrequest对象。这个对象上添加上述的两个事件:代码如下

JavaScript离线应用和客户端存储知识详解

默认情况下,indexeddb数据库是没有版本号的。最好一开始就为数据库指定一个名字,为此可以调用setversion()方法,传入字符串形式表示版本号。

indexeddb创建对象存储空间,需要定义一个键,然后就可以添加数据,可以使用游标在对象存储空间中查询特定的对象,而索引则是为了提高查询速度而基于特定的属性创建的。

有了上述这些选择,就可以在客户端机器上使用javascript存储大量数据了,但是你要小心,不要在客户端存储敏感数据,因为数据缓存不会。