如何评估不同浏览器对HTML5的兼容性？

#### Form 2.0表单元素

对于企业级Web应用来说，表单控件是最重要的页面元素之一，在HTML5之前，各种类型的表单只能由开发人员通过复杂的属性设置和限制条件（通过脚本计算）来完成，制定中的HTML5标准引入了一系列分类清晰、功能完善的表单控件标记，包括email、url、number、range、search、color等，还有表单属性autocomplete、autofocus等，这里提供一个简单例子，用户填写电子邮箱（自动检测格式正确与否）和个人主页（自动检测格式正确与否）等，然后提交给后台系统：

```html

```

由于HTML5引入的表单控件、属性比较多，这里选取了部分进行了测试，如表4所示：

| 浏览器 | 版本 | email | url | number | range | search | color | autocomplete | autofocus |

|||||||||||

| Internet Explorer 9 | 部分支持 | 部分支持 | 部分支持 | 部分支持 | 部分支持 | 部分支持 | 部分支持 | 部分支持 | 部分支持 |

| Safari | 5.1+ | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 |

| Firefox | 4.0+ | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 |

| Chrome | 12+ | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 |

| Opera | 11.5+| 支持 | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 | 支持 |

几点说明：

Firefox 4.0将开始支持email、url等表单元素。

自动填充已经作为许多浏览器的一项基本功能存在，与HTML5标准的autocomplete属性需要区别开。

#### 本地客户端存储

Web开发人员经常通过cookie管理客户信息，但是当数据量比较大时，这种方法相对低效，一方面是因为cookie存在大小限制，另一方面每次都通过网络请求来传递，HTML5引入两种新的存储方式：localStorage——没有时间限制的数据存储 sessionStorage——针对session的数据存储，下面的例子分别使用LocalStorage和SessionStorage实现了简单计数器，结果如表5所示：

```html

```

表5是本地客户端存储测试结果：

| 浏览器 | 版本 | localStorage | sessionStorage |

|||||

| Internet Explorer 9 | 完全支持 | 完全支持 |

| Safari | 5.1+ | 完全支持 | 完全支持 |

| Firefox | 4.0+ | 完全支持 | 完全支持 |

| Chrome | 12+ | 完全支持 | 完全支持 |

| Opera | 11.5+| 完全支持 | 完全支持 |