第 23 章 离线应用与客户端存储

79 阅读2分钟

23.1 离线检测

HTML5为此定义了一个navigator.onLine属性,这个属性值为 true 表示设备能上网,值为 false 表示设备离线。

HTML5 还定义了两个事件:online 和 offline。当网络从离线变为在线或者从在线变为离线时,分别触发这两个事件。这两个事件在 window 对象上触发。

23.2 应用缓存

HTML5 的应用缓存(application cache),或者简称为 appcache。Appcache 就是从浏览器的缓存中分出来的一块缓存区。要想在这个缓存中保存数据,可以使用一个描述文件(manifest file),列出要下载和缓存的资源。

CACHE MANIFEST

#Comment

file.js

file.css

要将描述文件与页面关联起来,可以在<\html>中的 manifest 属性中指定这个文件的路径

<html manifest="/offline.manifest">

23.3 数据存储

23.3.1 Cookie

HTTP Cookie,通常直接叫做 cookie,最初是在客户端用于存储会话信息的。该标准要求服务器对 任意 HTTP 请求发送 Set-Cookie HTTP 头作为响应的一部分,其中包含会话信息。

每个域的 cookie 总数是有限的,cookie 长度限制在 4095B也就是4kb。

23.3.3 Web存储机制

Storage 类型提供最大的存储空间(因浏览器而异)来存储名值对儿。Storage 的实例与其他对 象类似,有如下方法。

  • clear(): 删除所有值;Firefox 中没有实现 。
  • getItem(name):根据指定的名字 name 获取对应的值。
  • key(index):获得 index 位置处的值的名字。
  • removeItem(name):删除由 name 指定的名值对儿。
  • setItem(name, value):为指定的 name 设置一个对应的值。

sessionStorage 对象存储特定于某个会话的数据,也就是该数据只保持到浏览器关闭。

localStorage 中的数据保留到通过 JavaScript 删除或者是用户清除浏览器缓存。

对 Storage 对象进行任何修改,都会在文档上触发 storage 事件。这个事件的 event 对象有以下属性。

  • domain:发生变化的存储空间的域名。
  • key:设置或者删除的键名。
  • newValue:如果是设置值,则是新值;如果是删除键,则是 null。
  • oldValue:键被更改之前的值。

sessionStorage 和 localStorage 大约为 5M

23.3.4 IndexedDB

Indexed Database API,或者简称为 IndexedDB,是在浏览器中保存结构化数据的一种数据库。