元素的标题,元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
:
HTML5 Web 存储:
HTML5 web 存储,一个比cookie更好的本地存储方式。
客户端存储数据的两个对象为:
localStorage,用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去除。
sessionStorage,用于临时保存同一窗口(或标签页)的数据,在关闭窗口或标签页之后将会删除这些数据。
不管是 localStorage,还是sessionStorage,可使用的API都相同,常用的有如下几个(以localStorage为例):
保存数据:localStorage.setItem(key,value);
读取数据:localStorage.getItem(key);
删除单个数据:localStorage.removeItem(key);
删除所有数据:localStorage.clear();
得到某个索引的key:localStorage.key(index);
sessionStorage 方法针对一个 session进行数据存储。当用户关闭浏览器窗口后,数据会被删除。
网站列表程序实现以下功能:
可以输入网站名,网址,以网站名作为key存入localStorage
根据网站名,查找网址
列出当前已保存的所有网站
HTML5 Web SQL 数据库:
Web SQL 数据库 API 并不是HTML规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs
以下是规范中定义的三个核心方法:
openDatabase:这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
transaction:这个方法让我们能够控制一个事务,以及基于这种情况执行提交或者回滚。
executeSql:这个方法用于执行实际的 SQL 查询
HTML5 应用程序缓存:
应用程序缓存为应用带来三个优势:
离线浏览 - 用户可在应用离线时使用它们。
速度 - 已缓存资源加载得更快
减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
:
HTML5 Web SQL 数据库
Web SQL 数据库 API 并不是 HTML5 规范的一部分,但是它是一个独立的规范,引入了一组使用 SQL 操作客户端数据库的 APIs。
以下是规范中定义的三个核心方法:
openDatabase:这个方法使用现有的数据库或者新建的数据库创建一个数据库对象。
transaction:这个方法让我们能够控制一个事务,以及基于这种情况执行提交或者回滚。
executeSql:这个方法用于执行实际的 SQL 查询。
打开数据库
我们可以使用 openDatabase() 方法来打开已存在的数据库,如果数据库不存在,则会创建一个新的数据库,使用代码如下:
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
openDatabase() 方法对应的五个参数说明:
1. 数据库名称
2. 版本号
3. 描述文本
4. 数据库大小
5. 创建回调
第五个参数,创建回调会在创建数据库后被调用。
:
HTML5 应用程序缓存
使用 HTML5,通过创建 cache manifest 文件,可以轻松地创建 web 应用的离线版本。
什么是应用程序缓存(Application Cache)?:
HTML5 引入了应用程序缓存,这意味着 web 应用可进行缓存,并可在没有因特网连接时进行访问。
应用程序缓存为应用带来三个优势:
1. 离线浏览 - 用户可在应用离线时使用它们
2. 速度 - 已缓存资源加载得更快
3. 减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源。
:
HTML5 Web Workers
web worker 是运行在后台的 JavaScript,不会影响页面的性能。
什么是 Web Worker?:
当在 HTML 页面中执行脚本时,页面的状态是不可响应的,直到脚本已完成。
web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。您可以继续做任何愿意做的事情:点击、选取内容等等,而此时 web worker 在后台运行。
:
HTML5 服务器发送事件(Server-Sent Events)
HTML5 服务器发送事件(server-sent event)允许网页获得来自服务器的更新。
Server-Sent 事件 - 单向消息传递:
Server-Sent 事件指的是网页自动获取来自服务器的更新。
以前也可能做到这一点,前提是网页不得不询问是否有可用的更新。通过服务器发送事件,更新能够自动到达。