Chapter 10 其它客户端技术
1、客户端检测Client Detection
客户端检测是跨浏览器开发中用到一种处理兼容性问题的开发手段。常用的有三种方式，按照使用的优先级排列分别而是：能力检测>怪癖检测>用户代理检测。
1.1 能力检测（feature detection）
检测浏览器是否支持某项属性或方法。
基本形式：
if(capability){
do something with this capability // 不能是另外一个
}
先检测最常用的，再检测特殊的。保证常用的先执行，可以使检测次数最小化。
另外需要注意，检测能力不代表检测浏览器，二者不可混淆。
检测某种能力是否存在，是强度最低的一种方式，更强的方式是检测能力的类型（使用typeof运算符）或者检测多种能力的组合。
1.2 怪癖检测（quirks detection）
检验浏览器存在的某种缺陷。通过运行一段代码，如果能够运行，则返回true，如果因为存在某种缺陷导致这段代码不能运行或者返回假值，则返回false。
1.3 用户代理检测
通过检测用户代理字符串（navigator.userAgent）中特定浏览器携带的信息，来检测浏览器（或渲染引擎）的类型。
用户代理的检测还包括：平台（操作系统）、移动设备类型等。
2、客户端储存Client Storage
H5的一个目标是实现离线应用，而要做到这一点，就必须有一块本地空间用于保存数据。此外，出于减少资源请求，提高资源利用率等原因，也需要用到客户端储存技术。
客户端储存的信息有两类，一类是应用缓存（application cache），其原理是通过一份描述文件列出需要缓存的资源，并在浏览器缓存区域中储存。
另一类是数据储存，储存数据的方式有许多种，下面依次介绍。
2.1 cookie
cookie是与域名绑定的，不会被其它域访问。
每个域名下可设置的cookie总数是有限的，各浏览器有不同规定。每个cookie的大小不超过4kb。
cookie由以下几个部分组成：cookie名、值、域、路径、失效时间、安全标识。其中名和值是必须的。
可通过document.cookie访问cookie信息。
和cookie相关的方法主要有三种：读取、写入和删除。
2.2 web storage
storage弥补了cookie的局限性，提供了一种容量更大且允许跨会话存在的储存机制。
|
clear() |
删除所有值 |
|
getItem(name) |
根据name获取相应的值 |
|
key(index) |
获取index处的值的名字 |
|
removeItem(name) |
删除由name指定的名值对 |
|
setItem(name, value) |
为指定的name设置一个值，或者用于设置新的名值对 |
storage是一个引用类，它有两个实例：sessionStorage和globalStorage。
sessionStorage的数据只能保持到浏览器关闭。本地文件不可用。
sessionStorage本质就是对象，所以要储存数据，除了用setItem方法外，还可以直接设置：sessionStorage.name = value;以及直接读取：var val = sessionStorage.name;
globalStorage在H5规范中被localStorage替代。
localStorage的数据一直保存到被js清除或缓存被清除之时。和cookie一样，localStorage只能在同一域名下使用。其大小限制在2.5MB内（有的浏览器是5MB）。
2.3 IndexedDB
IndexedDB是在浏览器中保存结构化数据的一种数据库。
它采用对象储存数据，而不是用表。
它也受同源限制。大小一般不超过5MB。