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

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

  1. 首先，要能确定设备能否上网，以便下一步执行正确的操作
  2. 然后，应用还必须能访问一定的资源（图像、JavaScript、CSS等）
  3. 最后，要有本地存储空间，无论是否上网都不妨碍读写

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的两个目标：

  1. 提供一种cookie之外的存储会话数据的途径
  2. 提供一种存储大量可以跨会话存在的数据机制
  • 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()
  • 限制
    • 同源（协议，域名，端口） -> 不能跨域共享