关于JavaScript离线存储_js 文件断网保存-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_39876270/article/details/108334820

本文探讨了如何利用navigator.onLine属性检测设备网络状态，介绍了HTML5的离线应用缓存机制，包括应用缓存的状态、事件及API使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

检测设备是否已经离线

navigator.onLine:返回布尔值，返回true为设备可上网，false则为不可上网，不同浏览器有一定的差异
IE6+和Safari5+可以正确检测到网络已断开，并将navigator.onLine的值转换为false
Firefox3+和Opera10.6+支持navigator.onLine属性，但必须手工选中菜单项文件→Web开发人员（设置）→脱机工作才能让浏览器正常工作
Chrome11及之前版本始终将navigator.onLine属性设置为true（2011年10月已被修复）
除了navigator.onLine属性之外，为了更好地确定网络是否可用，HTML5定义了两个时间：online和offline。当网络从在线变为离线时，分别触发这两个时间。这两个事件在window对象上触发;
为了检测离线应用是否离线，在页面加载后，最好通过navigator.onLine取得最初状态。然后通过online和offline来确定网络连接状态是否变化。当online和offline触发时，naviator.onLine属性值也会改变，不过需要手工轮询此属性才能检测到网络的变化
支持离线检测的浏览器又IE6+（只支持navigator.onLine属性）、Firefox3、Safari4、Opera10.6、Chrome、IOS3.2版Safari和Android版WebKit

应用缓存

HTML5的应用缓存（application cache），或者简称为appcache，是专门为开发离线web应用而设计的。Appcache就是从浏览器的缓存中分出来一块缓存区。要想在这个缓存中保存数据，可以使用一个描述文件（manifcst file），列出要下载和缓存的资源
要将描述文件与页面关联起来，可以在html中的manifest属性中指定这个文件的路径
```
<html manifest = "/offline.manifest">
```
以上代码告诉页面，/offline.manifest中包含这个描述文件。这个文件的MIME类型必须是text/cach-manifest
虽然描述文件的扩展名以前推荐用mainfest，但现在推荐的是appcache
虽然离线缓存的意图是去报离线时资源可用，但也有相应的JavaScript API让你知道它都在做什么。这个API的核心是applicationCache对象，此对象有一个status属性，属性的值是常量，表示应用缓存的如下状态：
0：无缓存，即没有与页面相关的应用缓存
1：限制，即应用缓存未得到更新
2：检查中，即正在下载描述文件并检查更新
3：下载中，即应用缓存正在下载描述文件中指定的资源
4：更新完成，即应用缓存已更新了资源，且所有资源都已下载完毕，可以通过swapCache( )来使用了
5：废弃，即相应缓存的描述文件已经不在了，因此页面无法再访问应用缓存
应用缓存的相关事件，表示其状态的变化，如下：
checking：在浏览器为应用缓存查找更新时触发
error：在检查更新或下载资源期间发生错误时触发
noupdate：在检查描述文件发现文件无变化时触发
downloading：在开始下载应用缓存资源时触发
progress：在文件下载应用缓存的过程中不断地触发
updateready：在页面新的应用缓存下载完毕且可通过swapCache( )使用时触发
cached：在应用缓存完整可用时触发
一般来讲，这些事件会随着页面加载按上述依次触发。不过，通过调用update( )方法也可以手工干预，让应用缓存未检查更新而触发上述事件
update( )：一经调用，应用缓存就会去检查描述文件是否更新（触发checking事件），然后就想页面刚刚加载一样，继续执行后续操作。如果触发了chched事件，就说明应用缓存已经准备就绪，不会再发生其他操作了。如果触发了updateready事件，则说明新版本的应用缓存已经可用，而此时需要调用swapCache( )来启用新缓存
支持HTML5离线缓存的浏览器有Firefox3+、Safari4+、Opera10.6、Chrome、IOS3.2+版及Android版Webkit，在Firefox4之前版本中调用swapCache( )会报错；