4.表单新增功能H5新特性总结
1.h5新语义元素
header标签包含引导和导航等,通常包含h1~h6、搜索框、logo等。
footer标签一般配合address标签(显示地址),包含作者信息、相关链接等。
nav标签一般包含多个a标签,构建导航组件。
aside标签主要装载广告、侧边栏。
article标签包含文章,一般内嵌header、footer、h1、p标签。
section标签可以用在以上任一一个标签中划分组件。
hgroup顾名思义是h1~h6的集合。
总体来说,这些标签就是div标签的语义化转化,过去我们曾用div来包裹某个块或者说组件,现在h5使用这些标签实现语义化,有利于代码可读性和SEO。语义元素在IE6-8的兼容可以使用
2.本地存储
h5提供了sessionStorage、localStorage和indexedDB加强本地存储。使用之前应该先判断支持情况
if(window.sessionStorage){//浏览器支持sessionStorage}if(window.localStorage){//浏览器支持localStorage}
localStorage和sessionStorage的区别在于sessionStorage基于会话,关闭浏览器之后存储消失。localStorage在各浏览器中上限不同,最低的是2.6MB, 所以开发上限为2.6MB, 当然这比cookie强太多,如果还是不够的话只能借助indexedDB, indexedDB上限是250MB。
localStorage和cookie另一个区别是没有过期时间,不过这个可以在localStorage中加一个时间字段轻松解决这个问题。
存取localStorage可能遇到的坑是跨域问题,因为localStorage是域内安全,也就是同一个域才能对localStorage进行存储,可以通过postMessage来解决。以下是它的常用应用场景
varuserData={name:'sysuzhyupeng',age:24}localStorage.setItem('userDate',JSON.stringify(userData));varnewUserData=JSON.parse(localStorage.getItem('userData'));
另外,浏览器提供了storage事件来监听存储
window.addEventListener('storage',showStorageEvent,true)