离线应用与客户端存储

一、离线检测

1. 属性

navigation.onLine 返回 true / false

2. 事件

  1. online事件，从离线变为在线时触发
  2. offline事件，从在线变成离线时触发

二、应用缓存

HTML5 的应用缓存（application cache），简称 appcache，是专门为开发离线 Web 应用而设计的。

1. 描述文件

该文件用于描述需要下在和缓存的资源，其文件后缀为 manifest，不过现在推荐用 appcache。在文件中可以通过描述指定资源缓存的规则，下面是一个简单的示例：

CACHE MANIFEST
# Comment

file.js
file.css

1）使用

<html manifest="/filename.manifest" >

2） applicationCache 对象

属性

通过 applicationCache.status 可以知道缓存的状态，改属性返回一个常量：

  • 0：无缓存
  • 1：闲置，即应用缓存未得到更新
  • 2：检测中，即正在下载描述文件并检测更新
  • 3：下载中，即应用缓存正在下载描述文件中指定的资源
  • 4：更新完成，通过 swapCache() 来使用
  • 5：废弃，即应用缓存描述文件已经不在，因此页面无法再访问应用缓存

事件

  • checking：浏览器为应用缓存检测更新时触发
  • error：检测更新或下载出错时触发
  • noupdate：检测描述文件发现文件无更新时触发
  • downloading：开始下载资源时触发
  • progress：下载期间继续不断触发
  • updateready：下载完成且可通过 swapCache() 使用是触发
  • cached：在应用缓存完整可用是触发

方法

  • swapCache()：启用新缓存
  • update()：检查描述文件是否更新，如果更新继续执行后续操作

三、数据存储

最初是在客户端用于存储会话信息的。
其性质是绑定在特定的域名下，在创建它的域名发送请求时都会包含这个 cookie。

1）限制

  1. 个数限制：20 ~ 50 ~ 不限制
  2. 大小限制：最好在 4095B 以内

2）构成

构成的参数通过分号加空格分割

name=value; domain=xxx; path=xxx; expires=xxx; secure
  1. 名称：唯一确定一个 cookie， 不区分大小写，传送时必须是 URL 编码
  2. 值：传送时必须是 URL 编码
  3. 域：cookie 将绑定的域，如果包含子域（.wrox.com），则对 wrox.com 所有子域都有效，默认是这种 cookie 所在的那个域
  4. 路径：对于指定域中的那个路径，应该向服务器发送 cookie
  5. 失效时间：默认会话结束即删除所有 cookie，也可设置 GMT 格式的时间戳指定删除时间
  6. 安全标准：指定后，cookie 只有在使用 SSL 连接时 （https）才会发送到服务器

注意：域、路径、失效时间、secure标志 都是服务器或通过 js 给浏览器的提示，这些参数不会发送到服务器，只有名值对才会被发送

document.cookie = "name=value; domain=xxx; path=xxx; expires=xxx; secure"

只有名值对是必须的，最好在设置时通过 encodeUTIComponent() 进行编码

document.cookie = encodeUTIComponent(name) + "=" + encodeUTIComponent(value) + "; domain=".wrox.com"

可以写一个工具函数来处理 cookie 的设置 p 633

是一种 hack 方法，用于解决单个域下 cookie 个数限制的问题，可以在一个 cookie 下存储多个名值对，然后再解析出来。使用如下：

document.cookie = "name=name1=value1&name2=value2&name3=vuale3"

要注意避免超过单个 cookie 的长度限制

2. IE用户数据

其默认会跨越会话持久存在，需要手动删除。
跟 cookie 类似有域，路径，协议限制，需要在这些条件相同时才能访问到数据

1）使用

通过 css 在元素上指定 userDate 行为

<div style="behavior:url(#default#userDate)" id="dataStore"></div>

添加键名对并保存在 BookInfo 数据空间下

var dataStore = document.getElementById('dataStore');
dataStore.setAttribute("name", "value");
dataStroe.setAttribute("name2", "value2");
dataStore.save("BookInfo");

下一次页面载入后，调用 load() 载入指定数据空间的数据

dataStore.load('BookInfo');
var name = dataStore.getAttribute("name");
var name2 = dataStroe.getAttribute("name2");

删除数据，注意要调用 save() 来提交更改

dataStore.removeAttribute("name");
dataStroe.removeAttribute("name2");
dataStore.save("BookInfo");

3. Web 存储机制

1）Storage 类型

通过 Storage 的实例来存储键值对

方法

  1. clear()
  2. getItem( name )
  3. key( index )
  4. removeItem( name )
  5. setItem( name, value )

因为每个项目都是作为属性存在 Storage 实例对象上的，所以也可以通过点（.）或方括号（[]）访问，也可以通过 delete 删除。

属性

  1. lenght：获取存放在 Storage 实例对象上的键值对数
  2. remainingSpace：获取还可以使用的存储空间的字节数（IE8+）

事件

对 Storage 对象进行任何修改都会在 document 上触发 storage 事件，这些修改包括 通过属性或setItme() 保存数据，通过 delete 或 removeItem() 删除数据，调用 clear() 方法。

  1. 事件的 event 对象的属性
  • domain
  • key：设置或删除的键名
  • newValue：新值 / null
  • oldValue

2）sessionStorage 对象

它是一个可以直接使用的对象，而不是构造函数，它是 Storage 的一个实例，具备 Storage 的方法、属性和事件。

sessionStorage 对象存储特定于某个会话的数据，该数据只保持到浏览器页面关闭，但是Chrome 的会话cookie 会在浏览器整个关掉后才删除数据。

sessionStorage 对象中的数据可以在 同一个页面 刷新后还存在，但是同一个浏览器的不同标签页下的同一个路径的两个页面是不能访问到对法页面设置的 sessionStorage 对象的，不过 cookie 可以。

由于是基于浏览器会话，所以文件在本地页面时无法使用这个对象（可以通过 localhost 来访问页面使用）。

存储在 sessionStorage 对象中的数据只能由最初给对象存储数据的页面访问到，所以对多页面应用有限制。

除了具备 Storage 的方法、属性和事件外，IE8 还提供了 begin() 方法和 commit() 方法，用于强制把数据写入磁盘，因为有些浏览器不会实时将数据写入磁盘，而是通过异步写入数据，会有点延时。

3）globalStorage 对象

Firefox2 中实现的，用于跨会话存储数据，需要指定哪些域（及其子域）能访问。Chrome和一些浏览器没有这个对象。

globalStorage["wrox.com"].name = "xxx"

注意，这里 globalStorage 不是 Storage 的实例，globalStorage["wrox.com"] 才是。

对 globalStorage 空间的访问，需要依据页面的 域名、协议、端口 来限制。

如果不主动删除，globalStorage 属性中的数据会一直保存在磁盘上。

4）localStorage 对象

localStorage 对象用于取代 globalStorage 对象，不能给 localStorage 对象指定域名访问限制，规则事先就设置好了，即当前页面的域名。

页面必须来着 同一个域名（子域名无效），使用同一种协议，在同一个端口上

跟 globalStorage 一样需要主动删除

4. IndexedDB

在浏览器上使用的数据库，不常用，不讲了

注意

转载、引用，但请标明作者和原文地址

posted @ 2018-03-08 01:04  另一个小菜头  阅读(487)  评论(0)  编辑  收藏  举报