一、离线检测
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）限制：遵循同源策略，存储限制，访问本地文件的限制（不同浏览器限制不同）。
转载：https://blog.csdn.net/Dora_5537/article/details/102074707