javascript:离线应用与客户端存储

  • 离线检测

   首先检查设备是否在线,html5定义了navigator.onLine属性,html5还定义了两个事件:online和offline,在线和离线状态切换变化时会触发。这两个事件在window对象上触发。

  

if(navigator.onLine ){
//在线
}
else{//离线
}
EventUtil.addHandle(window,"online",function(){
})
  • 应用缓存

  html5的应用缓存,或者简称为appcache,专门为开发离线应用而设计的,是从浏览器缓存中开辟的一个小缓存,需要使用一个描述文件(manifest file)才能在这块缓存中存储数据,

  列出需要下载和缓存的资源:file.css  file.js

  将描述文件与页面关联起来的方法:

  

<html manifest ="描述文件的路径">

  通过javascript API 中的application cache对象跟踪应用缓存过程的状态,applicationCache的属性status描述状态,其值为常量:

  0 -- 无缓存

  1 -- 应用缓存未更新

  2 -- 正在检查描述文件是否有更新

  3  -- 正在下载最新的描述文件

  4 -- 更新完成

  5 -- 应用缓存的描述文件不存在

  应用缓存还有很多相关的事件表示其状态的变化:

  checking  error  noupdate downloading progress upodateready cached

  调用applicationCache.swapupdate()启动应用缓存

  • 数据存储

  直接在客户端上存储用户的信息。

    1)Cookie

      在进行http请求时在header头部进行cookie值的设置,set-cookie: name=value

      cookie包含的内容有:

      1)名称,必须经过URL编码

      2)值,必须经过URL编码

      3)域,cookie对于哪个域是有效地

      4)路径,cookie对于有效域下地哪个路径是有效地

      5)失效时间,一般式在浏览器会话结束时关闭,但也可以自行设置失效时间

      6)安全标志,指定secure,cookie只有在使用SSL连接的时候才发送到服务器

      在单个域下cookie设置的数量和所占的字节数都是有限制的。

      在javascript读写cookie不是很直观,所以往往需要手动创建函数来简化操作,cookie的常规操作有读取,写入,删除操作。

   2)web存储机制

      web storage是用来克服由cookie带来的一些限制,web storage的两个主要目标是:提供cookie之外存储会话数据的方式;提供一种可以存储大量会话数据的机制。

  •  storage类型

    storage类型提供最大的存储空间来存储名值对,有如下方法:

      clear() -- 删除所有值

      getItem(name) -- 根据name获取对应的值

      setItem(name,value)

      removeItem(name)

      key(index) -- 获得index位置处的值

  • sessionStorage对象(是storage的一个实例)

    存储特定会话的数据,该数据只保存到浏览器关闭。

    sessionStorage.getItem(name);

  • globalStorage对象

    对globalStorage对象的访问是依据页面的协议、域名、端口号来限制的,各个浏览器对存储数据的内容空间有限制。

  • localStorage对象

    在html5中取代了globalStorage,用于持久保存客户端看数据,localStorage也必须在同源下才可以访问数据。

 

              

posted @ 2018-03-20 16:39  LittleGirl_MyBaby  阅读(127)  评论(0编辑  收藏  举报