Web Storage

  • Cookie的缺点:
  • 每次HTTP请求都会包含Cookie,会降低请求速度;
  • Cookie数据未加密,在不使用SSL的情况下不安全;
  • Cookie的尺寸限制为4KB
  • LocalStorage和sessionStorage的数据以字符串键值对的形式储存,他们的区别如下:
  • 生存周期不同:当包含页面的选项卡或者窗口关闭后,sessionStorage中存储的数据就清空了,而LocalStorage中存储的数据依然存在;
  • 数据可见度不同:sessionStorage中存储的数据只有当前页面可以访问,而LocalStorage存储的数据对相同origin的所有页面都可见。
  • Web Storage事件会在相同origin的所有页面上触发,无论该页面是否对Web Storage进行过操作,所以可以利用这些事件来进行页面之间的通信。

 

 

 

 

 

Offline Web Application

  • Offline Web Application需要一个离线清单文件(*.manifest),该文件可以位于服务器上的任何位置,但必须以text/cache-manifest为内容类型提供。
  • Offline Web Application中所有页面的<html>标签中都要添加指向该清单文件的manifest特性。
  • 清单文件示例:

 
FALLBACK: / /offline.html  
NETWORK: *

  • 无论当前是否在线,CACHE MANIFEST中的所有资源都会被缓存起来;NETWORK节表示“白名单”,该节中的所有资源都不会被缓存下来,只能在线获取;FALLBACK则为那些无法获取的资源提供一个备用路径。
  • window.applicationCache对象包含许多事件
  1. 当浏览器发现<html>标签中的manifest特性时,就会触发checking事件;
  2. 如果浏览器之前从未见过此清单文件:
  1. 触发downloading事件,然后开始下载清单中的资源。
  2. 下载过程中会触发progress事件,该事件包含了已下载文件的数量和待下载文件的数量等信息。
  3. 清单中的资源都下载完毕后,会触发cached事件,这表明该Offline Web Application已经可以在离线使用了。
  1. 如果浏览器之前访问过包含同一清单文件的页面,就会去检查该清单是否发生了变化:
  1. 如果没有变化:触发noupdate事件;
  2. 如果发生了变化:会触发downloading事件,当清单中的资源都下载完毕后,会触发updateready事件,这表明该Offline Web Application已经更新成功。但浏览器仍然在使用旧版本,想要切换到新版本,需要手工调用window.applicationCache.swapCache()方法。
  1. 期间如果发生了错误,哪怕只有一个文件下载失败这样的错误,都会导致整个缓存过程失败,并会触发error事件,最要命的是这个事件并不会告诉你具体错在哪里。
  • window.applicationCache.status指示了缓存的状态:
  • 0:UNCACHED
  • 1:IDLE
  • 2:CHECKING
  • 3:DOWNLOADING
  • 4:UPDATEREADY
  • 5:OBSOLETE
  • 可以调用window.applicationCache.update()方法来向浏览器请求更新缓存。
  • Web Server应当通过一些HTTP headers(譬如Expires和Cache-Control)来将文件的一些信息告诉浏览器。如果浏览器通过HTTP headers发现清单文件过期,就会向服务器请求新版本并下载它。此时浏览器会将服务器上一次通过HTTP headers发送给它的last-modified时间发回给服务器,如果服务器发现发现清单文件在该日期之后并没有更改过,就会返回304状态码,表示“Note Modified”。如果发生了变化,就会返回200状态码以及新文件的内容(当然也会包含Cache-Control和新的last-modified headers);
  • 所以每次修改了需要缓存的文件之后,记着也要修改清单文件,这样服务器才会认为它更新了版本。简单的方法是在清单文件中加一行版本注释,每次修改注释中的版本号即可。
  • 当浏览器以联机方式工作时,navigator.onLine的值为true。