【JavaScript高级程序设计】第23章（离线应用与客户端存储）

23. 离线应用与客户端存储

离线应用要与传统客户端应用同场竞技

首先，要能确定设备能否上网，以便下一步执行正确的操作

然后，应用还必须能访问一定的资源（图像、JavaScript、CSS等）

最后，要有本地存储空间，无论是否上网都不妨碍读写

23.1 离线检测

属性
- navigator.onLine
事件
- online
- offline

23.2 应用缓存`application cache`

描述文件manifest file

CACHE MANIFEST
#Comment

file.js
file.css

引用 <html manifest="/offline.manifest">
applicationCache对象
- status 0无缓存1闲置2检查中3下载中…
- 事件 checking/error/noupdate/downloading/progress/updateready/cached

23.3 数据存储

某个特定用户的信息应该存储在该用户的机器上。（登录信息、偏好设定）

Cookie 在客户端存储会话信息

服务器响应头：
HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=value
Other-header: other-header-value

浏览器为每个请求添加Cookie HTTP头将信息发送回服务器：
GET /index.html HTTP/1.1
Cookie: name=value
Other-header: other-header-value

cookie 限制
- cookie在性质上是绑定在特定的域名下的。
- 当设定一个cookie后，再给创建他的域名发送请求时，都会包含这个cookie。
- 这个限制确保了存储在cookie的信息只能让批准的接受者访问。
- 删除策略LRU least recently used 最近最少使用
cookie 构成
- 名称 Name
- 值 Value 字符串
- 域 Domain
- 路径 Path
- 失效时间 Expires / Max-Age
- 安全标志 Secure 使用SSL连接时才发送

域、路径、失效时间、secure标志都是服务器传递给浏览器的指示，以指定如何发送cookie。这些参数并不会作为发送到服务器的信息的一部分，只有名值对儿才会被发送。

Response Headers:

Request Headers:

JavaScript中使用Cookie

document.cookie; // 读
document.cookie = "name=value"; // 写
document.cookie = encodeURIComponent("name") + "="
	+ encodeURIComponent("value") + "; domain=www.github.com; path=/";

子Cookie subcookie
- 为了绕开浏览器对cookie数的限制，name=name1=value1&name2=value2
cookie性能
- 所有的cookie都会由浏览器作为请求头发送，所以cookie中存储大量信息会影响到特定域的请求性能。

当数据需要被严格控制在客户端上时，无需持续地将数据发回服务器。WebStorage的两个目标：

提供一种cookie之外的存储会话数据的途径

提供一种存储大量可以跨会话存在的数据机制

WebStorage
- 通用方法和属性
  - clear()
  - getItem(name)
  - key(index)
  - setItem(name, value)
  - removeItem(name)
  - length
- sessionStorage 会话
  - IE的事务形式方法，begin，commit
- globalStorage 已废弃
- localStorage
  - 持久保存客户端数据
  - 数据保留到通过JavaScript清除或者用户自己清除浏览器缓存
- storage事件
- indexedDB 在浏览器中保存结构化数据的一种数据库
  - event.target.result
  - setVersion()
  - onerror/onsuccess
  - transaction()事务
  - 游标查询openCursor()
  - 键范围key range
  - 索引createIndex()
限制
- 同源（协议，域名，端口） -> 不能跨域共享