脚本宝典收集整理的这篇文章主要介绍了js实例教程-JavaScript离线应用和客户端存储知识详解，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

1.进行离线检测：

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

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

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

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()或者通过直接访问属性名来或许数据：

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

要从sessionStorage删除数据可以使用：

// 使用delete删除一个值delete sessionStorage.name;// 使用方法删除一个值：sessionStorage.removeItem("book");

sessionStorage只适用于针对会话的小段数据，如果需要跨越会话存储数据，那么globalStorage或者localStorage更为合适。

②.localStorage对象：

作为持久保存客户端数据的方案。存储在localStorage中的数据保留到通过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对象。这个对象上添加上述的两个事件：代码如下

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

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

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

觉得可用，就经常来吧！Javascript技巧 脚本宝典 欢迎评论哦！ js技巧，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的js实例教程-JavaScript离线应用和客户端存储知识详解全部内容，希望文章能够帮你解决js实例教程-JavaScript离线应用和客户端存储知识详解所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。