HTML5中应该记住的知识

转载地址：http://developer.51cto.com/art/201506/479156.htm

1 ：基于HTML5的移动Web应用

Canvas绘图：通过获取HTML中的Dom元素Canvas，调用其渲染上下文的Context对象，使用Js进行图形绘制。

多媒体：Video和Audio     （多媒体视频格式：Ogg  MPEG4  WebM）

本地存储：通过提供key/value方式存储数据

Web Storage：

基于HTML5的移动Web应用

Canvas绘图：通过获取HTML中的Dom元素Canvas，调用其渲染上下文的Context对象，使用Js进行图形绘制。

多媒体：Video和Audio     （多媒体视频格式：Ogg  MPEG4  WebM）

本地存储：通过提供key/value方式存储数据

Web Storage：localStorage - 没有时间限制的数据存储

sessionStorage - 针对一个 session 的数据存储，当用户关闭浏览器窗口后，数据会被删除

Web SQL Database： 通过类似关系数据库的形式存储数据（已经是个废弃的标准了）  三个核心方法  openDatabase transaction executeSql

离线应用：当支持离线应用的浏览器检测到清单文件（Manifest File），中的任何资源文件时，便会下载对应的资源文件，将它们缓存到本地

使用地理位置

移动Web框架：基于jQuery页面驱动的jQuery Mobile、基于ExtJS架构的Sencha Touch，以及能打通Web和Native两者之间通道的PhoneGap框架。有两种开发模式：基于传统Web的开发（jQuery Mobile）和基于组件式的Web开发（Sencha Touch）

localStorage - 没有时间限制的数据存储

sessionStorage - 针对一个 session 的数据存储，当                             用户关闭浏览器窗口后，数据会被删除

Web SQL Database： 通过类似关系数据库的形式存储数据（已经是个废弃的标准了）  三个核心方法  openDatabase transaction executeSql

离线应用：当支持离线应用的浏览器检测到清单文件（Manifest File），中的任何资源文件时，便会下载对应的资源文件，将它们缓存到本地

使用地理位置

移动Web框架：基于jQuery页面驱动的jQuery Mobile、基于ExtJS架构的Sencha Touch，以及能打通Web和Native两者之间通道的PhoneGap框架。有两种开发模式：基于传统Web的开发（jQuery Mobile）和基于组件式的Web开发（Sencha Touch）

2：HTML5 中的一些有趣的新特性：

• 用于绘画的 canvas 元素

• 用于媒介回放的 video 和 audio 元素

• 对本地离线存储的更好的支持

• 新的特殊内容元素，比如 article、footer、header、nav、section

• 新的表单控件，比如 calendar、date、time、email、url、search

3：localStorage： 永久保存的数据，是域内安全的，它是基于域的，任何在该域内的所有页面，都可以访问localStorage数据。

注意的是 Firefox中使用localStorage存储的数据在Chorme浏览器是无法读取的，同样，由于localStorage数据保存在设备中，同一个应用程序在不同设备上保存的数据是不同的，比如Android的数据IOS访问不了

先来看看Storage的API ：属性 length；方法：setItem、getItem、removeItem、clear 当然大家看名称也都能知道这些是什么含义，在这里就不具体赘述各自的具体写法

sessionStorage： 存储的数据周期只保存在存储它的当前窗口或者当前窗口新建的新窗口中，一旦关闭，数据就清除，它承接于Storage的接口，用法和localStorage基本一样

Storage时间监听： StorageEvent的API： key、oldValue、newValue、url、StorageArea； Storage时间可以使用addEventListener进行注册监听

转载地址：http://developer.51cto.com/art/201506/479156.htm