【JS】第23章 离线应用与客户端缓存

一、离线检测

navigation.onLine（H5的属性）、online、offline（H5的事件）

二、应用缓存

1. Appcache 是从浏览器的缓存中分出来的一块缓存区，要想在这个缓存中保存数据，可以使用一个描述文件（manifest file），列出要下载和缓存的资源。

2. 查看应用缓存的状态：applicationCache 对象（JS的API）的 status 属性

3. 应用缓存的事件，表示其状态的改变：checking、error、noupdate、downloading、progress、updateready、cached

4. applicationCache.update()：应用缓存去检查描述文件是否更新，触发 checking 事件
    applicationCache.swapCache()：启用新应用缓存

三、数据存储

1. Cookie：cookie 在客户端和服务器之间来回传递，以键值对的形式存储，并进行 URL 编码。

（1）限制：遵循同源策略、存储数量有限、存储大小有限（大约 4KB）

（2）构成：名称(name)、值(value)、域(domain)、路径(path)、失效时间(expires)、安全标志(secure)

其中，名称和值必须经过 URL 编码，失效时间默认为浏览器会话期间，安全标志则代表 cookie 只有在使用 SSL 连接时才发送到服务器。

（3）JS 中的 cookie：document.cookie（BOM 属性）、encodeURIComponent（）- 编码、decodeURIComponent（）- 解码

基本的 cookie 操作有三种：读取（get）、写入（set）和删除（unset），详见红宝书。

（4）子 cookie

2. IE 用户数据：持久化用户数据，遵循同源策略，用户数据允许每个文档最多 128KB 数据，每一个域名最多 1M 数据。要使用的话，首先需要使用 CSS 在某个元素上指定 userData 行为。

• setAttribute（）- 保存数据
• getAttribute（）- 获取数据
• removeAttribute（）- 删除数据
• save（）- 在保存和删除数据后都要调用此方法来提交更改

3. Web 存储机制：Storage 类型，包括 sessionStorage 对象、globalStorage 对象的属性（已被 localStorage 对象替代）、localStorage 对象，这三个都是 Storage 的实例。

（1）Storage 类型：只能存储字符串，非字符串会被转换成字符串。存储大小（5M 左右）。

• setItem（name，value）- 为指定的 name 设置一个对应的值
• getItem（name）- 根据指定的 name 获取对应的值
• removeItem（name）- 删除由 name 指定的名值对儿
• clear（）- 删除所有值；Firefox 中没有实现
• key（index）- 获得 index 位置处的值的名字
• length 属性 - 判断存储的名值对儿的数目 
• remainingSpace 属性 - 剩余存储空间的字节数
• delete 操作符

（2）sessionStorage 对象：浏览器会话期间有效，属性方法同上。如果 在IE8 中要将数据强行写入磁盘，在设置新数据之前使用 begin（）方法，并且在所有设置完成之后调用 commit（）方法。

（3）globalStorage 对象：遵循同源策略，长久保存，属性方法同上，可以设置访问规则。

（4）localStorage 对象：遵循同源策略，长久保存，属性方法同上，不可以设置访问规则。

4. IndexedDB：是在浏览器中保存结构化数据的一种数据库。 IndexedDB 设计的操作完全是异步进行的。差不多每一次  IndexedDB 操作，都需要注册 onerror 和 onsuccess 事件处理程序。

（1）数据库：打开数据库 ——  indexDB.open（数据库名）、指定数据库的版本号 —— db.setVersion（版本号）

（2）对象存储空间：db.creatObjectStore（）、store.add（）- 插入新值、store.put（）- 更新值

（3）事物：创建事物 —— db.transaction（），表示事物级的状态信息的事件处理程序：onerror 和 oncomplete 。

objectStore（）、add（）、put（）、delete（）、clear（）

（4）使用游标查询：openCursor（）、key、value、update（）、delete（）、continue（key）、advance（count）

（5）键范围：向 openCursor（）中传入的第一个参数：IDBkeyRange.only（）、IDBkeyRange.lowerBound（）、IDBkeyRange.upperBound（）、IDBkeyRange.bound（）

（6）设定游标方向：向 openCursor（）中传入的第二个参数：IDBCursor.PREV 或 IDBCursor.PREV_NO_DUPLICATE

（7）索引：创建索引 —— createIndex（）、index（）、get（）、indexNames、deleteIndex（）

（8）并发问题：onversionchange（）、setVersion（）

（9）限制：遵循同源策略，存储限制，访问本地文件的限制（不同浏览器限制不同）。