HTML5
HTML5 Web存储
HTML5 web 存储，是一个比cookie更好的本地存储方式。
HTML5 Web存储介绍
一种在本地存储用户浏览数据的存储方式，这些数据不会被保存在服务器上，只用于用户请求网站数据，更加安全和快速，它也可以存储大量数据而不影响网站性能。
数据以键/值对的形式存在，一个网页的数据只允许该网页访问使用
localStorage 和 sessionStorage是客户端存储数据的两个对象。
- localStorage：用于长久保存整个网站的数据，没有过期时间，需要手动删除。
- sessionStorage：用于临时保存一个窗口的数据，关闭窗口数据即被删除。
HTML5 Web存储的使用
- 在使用web存储前，应先检查浏览器是否支持：
<script type="text/javascript">
if (typeof(Storage) !== "undefined") {}
else {}
</script>
- localStorage对象
localStorage只要在相同的协议、相同的主机名、相同的端口下，就能读取/修改到同一份localStorage数据。
<script type="text/javascript">
if (typeof(Storage) !== "undefined") {
localStorage.sitename = '菜鸟教程';
document.getElementById('result').innerHTML = '网站名：' + localStorage.sitename;
} else {
document.getElementById('result').innerHTML = "对不起，您的浏览器不支持web存储";
}
</script>
- 使用
key='sitename'和value='菜鸟教程'创建了一个localStorage键/值对 - 只要不手动删除键/值对，则使用可以通过localStorage.key访问到value的值
- 语句
localStorage.removeItem('sitename');移除键/值对
localStorage和sessionStorage在存储数据上可使用的API都是相同的，常用的有：
1. 保存数据：localStorage.setItem(key,value);
2. 读取数据：localStorage.getItem(key);
3. 删除单个数据：localStorage.removeItem(key);
4. 删除所有数据：localStorage.clear();
5. 得到某个索引的key：localStorage.key(index);
【注】键/值对通常以字符串形式存储，可以根据需要将其转换为其他格式。
- sessionStorage对象
sessionStorage比localStorage更严苛一点，除了协议、主机名、端口外，还要求在同一窗口（也就是浏览器的标签页）下。
使用方法与 2.localStorage 对象相同。
HTML5 Web SQL 数据库
Web SQL 数据库API是独立于HTML5规范的一部分，它引入了一组使用SQL操作客户端数据库的APIs。
- 核心方法：
1.openDatabase：使用现有数据库或新建的数据库来创建一个数据库对象
2.transaction：控制一个事务，基于这种情况执行提交或回滚
3.executeSql：用于执行实际的SQL查询 - 打开数据库
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
五个参数说明：数据库名称、版本号、描述文本、数据库大小、创建回调
- 执行查询操作
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
});
- 插入数据
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS LOGS (id unique, log)');
tx.executeSql('INSERT INTO LOGS (id, log) VALUES (1, "菜鸟教程")');
tx.executeSql('INSERT INTO LOGS (id,log) VALUES (?, ?)', [e_id, e_log]);
});
- 读取数据
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM LOGS', [], function (tx, results) {
var len = results.rows.length, i;
msg = "<p>查询记录条数: " + len + "</p>";
document.querySelector('#status').innerHTML += msg;
for (i = 0; i < len; i++){
alert(results.rows.item(i).log );
}
}, null);
});
- 删除数据
db.transaction(function (tx) {
tx.executeSql('DELETE FROM LOGS WHERE id=1');
});
- 更新数据
db.transaction(function (tx) {
tx.executeSql('UPDATE LOGS SET log=\'www.w3cschool.cc\' WHERE id=2');
});
HTML5 应用程序缓存
应用程序缓存（Application Cache）：web应用进行缓存，并且在没有因特网连接时可以进行访问。
应用程序缓存带来的优势：
1. 离线浏览--用户可在应用离线时使用它们
2. 速度--已缓存资源加载得更快
3. 减少服务器负载--浏览器将只从服务器下载更新过的或更改过的资源
Cache Manifest基础
启用应用程序缓存，需在文档的<html>标签中包含manifest属性：
<!DOCTYPE HTML>
<html manifest="demo.appcache">
...
</html>
其中，.appcache文件是指定的manifest 文件。
Manifest 文件
manifest 文件内容：
manifest 文件告知浏览器被缓存和不被缓存的内容，文件由三部分组成：
- CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
- NETWORK - 在此标题下列出的文件需要与服务器连接且不会被缓存
- FALLBACK - 在此标题下列出的文件规定页面无法访问时的回退页面
一旦应用被缓存，它就会保持缓存直到：
1.用户清空浏览器缓存
2.manifest文件被修改
3.由程序来更新应用缓存
完整的Manifest文件：
CACHE MANIFEST
# 2012-02-21 v1.0.0
/theme.css
/logo.gif
/main.js
NETWORK:
login.php
FALLBACK:
/html/ /offline.html
HTML5 Web Workers
Web Workers：运行在后台的JS脚本，独立于其他脚本，不会影响页面的性能。
- 检查浏览器是否支持Web Worker
- 创建web worker文件
- 创建web worker对象
- 终止web worker
web worker实例：
<script>
var w;
function startWorker() {
if(typeof(Worker) !== "undefined") {
if(typeof(w) == "undefined") {
w = new Worker("demo_workers.js");
}
w.onmessage = function(event) {
document.getElementById("result").innerHTML = event.data;
};
} else {
document.getElementById("result").innerHTML = "抱歉，你的浏览器不支持 Web Workers...";
}
}
function stopWorker()
{
w.terminate();
w = undefined;
}
</script>
【注】由于web worker位于外部文件中，它们无法访问window对象、document对象、parent对象。
HTML5 SSE
SSE(Server-Sent Events)：服务器发送事件，允许网页获得来自服务器的更新。
Server-Sent事件：单向消息传递
- 接受Server-Sent事件通知
var source=new EventSource("demo_sse.php");
source.onmessage=function(event)
{
document.getElementById("result").innerHTML+=event.data + "<br>";
};
onmessage：当接收到消息
onopen：当通往服务器的连接被打开
onerror：当发生错误
- 检查Server-Sent 事件支持
if(typeof(EventSource)!=="undefined")
{
// 浏览器支持 Server-Sent
// 一些代码.....
}
else
{
// 浏览器不支持 Server-Sent..
}
- 服务器端代码
PHP：
<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$time = date('r');
echo "data: The server time is: {$time}\n\n";
flush();
?>
ASP：
<%
Response.ContentType="text/event-stream"
Response.Expires=-1
Response.Write("data: " & now())
Response.Flush()
%>
HTML5 WebSocket
WebSocket：是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。
在WebSocket API中，浏览器和服务器只需要完成一次握手，两者之间就可以创建持久性的连接，并进行双向数据传输。
浏览器通过 JavaScript 向服务器发出建WebSocket 连接的请求，连接建立以后，客户端和服务器端就可以通过 TCP连接直接交换数据。当你获取 Web Socket 连接后，你可以通过 send() 方法来向服务器发送数据，并通过 onmessage事件来接收服务器返回的数据。
HTML 多媒体
Web上的多媒体指的是音效、音乐、视频和动画。
多媒体标签：
| 标签 | 描述 |
|---|---|
| <embed> | 定义内嵌对象，HTML5中允许 |
| <object> | 定义内嵌对象 |
| <param> | 定义对象的参数 |
| <audio> | 定义音频内容 |
| <video> | 定义视频内容 |
| <source> | 定义媒体元素的资源 |
| <track> | 规定媒体元素的字幕文件或其他包含文本的文件 |
音频<audio>
- 使用插件（见下述HTML插件内容）
- 使用<audio>标签
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
<embed height="50" width="100" src="horse.mp3">
</audio>
- 使用<a>标签
<a href="horse.mp3">Play the sound</a>
视频<video>
- 使用插件（见下述HTML插件内容）
- 使用<video>标签
<video width="320" height="240" controls autoplay>
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4" width="320" height="240">
<embed width="320" height="240" src="movie.swf">
</object>
</video>
- 使用<a>标签
<a href="intro.swf">Play a video file</a>
HTML 插件
插件可以通过<object>标签或<embed> 标签添加进页面。
<object>
<object width="400" height="50" data="bookmark.swf"></object>
data属性的值是你要插入页面的对象。
<embed>
<embed width="400" height="50" src="bookmark.swf">
src属性的值是你要插入页面的对象。
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
