23. 离线应用于客户端缓存

离线检测

1. navigator.onLine 属性可以判断当前网络是否连通. 同时 还可以监听online offline事件来网络状态

应用缓存

1. applicationCache对象里有离线缓存相关

1. applicationCache.status 表示应用缓存当前的状态
2. 也有很多相关的事件

checking 缓存查找更新时候触发
error 检查更新或者下载资源发生错误时候触发
noupdate 发现文件无变化时候触发
downloading 开始下载时候触发
progress 在应用缓存的过程中不断触发
updateready 在页面新的应用缓存下载完毕且可以通过swapCache()(手动启用新应用缓存)时候触发
cached 在应用缓存完整可用时候触发
一般情况,以上是按顺序触发, 不过update()可以手动干预

Paste_Image.png

数据存储

1. cookie 需要encodeURLComponent进行编码
2. sessionStorage数据只会保存到浏览器关闭,存储在这里面的数据可以跨域页面刷新而存在(什么鬼),有的浏览器还支持在浏览器崩溃重启后session还依旧可用
3. globalStorage 只有在firefox下可用
4. globalStorage sessionStorage 域中任何一个页面存储的信息都能被所有的页面共享

indexedDB 要注意的是数据库的操作完全是异步进行

1. 打开数据库

   
   
   

   Paste_Image.png
2. 设置数据库版本,indexedDB数据库是没有版本号的,最好一开始就为数据库指定一个版本号,setVersion('1.0')
   已经没有setVersion方法, 现在设置版本号方法在下面
   
   

   错误代码, 代码会先执行下面的version判断,其次才到onsuccess事件
3. 现在indexedDB在open()时候可以传入第二个参数, 其含义为 创建/打开指定版本的数据库, 第二个参数只能为整数,同时会触发onupgradeneeded事件