第 14 章 HTML5 API
HTML5是用于创建网页的超文本标记语言的最新版本。目前最新的版本号为5.1,于2016年11月 成为了W3C的推荐标准。HTML5给规范添加了大量的新功能。还超越了实际的标记语言，带来 了很多相关的技术，比如CSS和JavaScript。我们在第10章介绍表单验证的时候，已经看到了一 些新的表单控件以及校验表单的API。在本章，我们将继续来看一下H TML5中有哪些其他的 API。
本章我们将学习如下内容：
- Web Storage存储数据
- Geolocation API获取位置信息
- Web Worker
•插入音频和视频
•使用canvas进行绘图
・HTML5中的拖放
- Notification API创建用户通知
14-1 Web Storage
Web Storage（Web存储）提供了一种方式，可以让Web页面实现在客户端浏览器中意键值对的形式 在本地保存数据。在了解H TML5的Web存储之前，我们先来看一下前面我们所介绍过的使用 Cookies存储机制的优缺点。
14-1-1 Cookie存储机制的优缺点
在讲解BOM一章时，我们有介绍过Cookie。Cookie是HTML4中在客户端存储简单用户信息的一 种方式，它使用文本来存储信息，当有应用程序使用Cookie时，服务器端就会发送Cookie到客户 端，客户端浏览器将会保存该Cookie信息。下一次页面请求时，客户端浏览器就会把Cookie发送 到服务器。Cookie最典型的应用是用来保存用户信息，用户设置和密码记忆等。
使用Cookie有其优点，也有其缺陷，其优点主要表现在以下几个方面。
・简单易用
・浏览器负责发送数据
・浏览器自动管理不同站点的Cookie。
但是经过长期的使用，Cookie的缺点也渐渐暴露了出来，主要有以下几点。
・因为使用的是简单的文本存储数据，所以Cookie的安全性很差。Cookie保存在客户端浏览 器，很容易被黑客窃取。
・Cookie中存储的数据容量有限，其上限为4KB。
•存储Cookie的数量有限，多数浏览器的上限为30或50个。
・如果浏览器的安全配置为最高级别，那么Cookie则会失效。
- Cookie不适合大量数据的存储，因为Cookie会由每个对服务器的请求来传递，从而造成 Cookie速度缓慢效率低下。
14-1-2 为什么要用 Web Storage
HTML5的Web Storage提供了两种在客户端存储数据的方法，
即 localStorage 和 sessionStorage 。
localStorage
localstorage是一种没有时间限制的数据存储方式，可以将数据保存在客户端的硬盘或其他存储 器，存储时间可以是一天，两天，几周或几年。浏览器的关闭并不意味着数据也会随之消失。当 再次打开浏览器时，我们依然可以访问这些数据。localStorage用于持久化的本地存储，除非主 动删除数据，否则数据是永远不会过期的。
sessionStorage
sessionStorage指的是针对一个session的数据存储，即将数据保存在session对象中。Web中的 session指的是用户在浏览某个网站时，从进入网站到关闭浏览器所经过的这段时间，可以称为 用户和浏览器进行交互的"会话时间"。session对象用来保存这个时间段内所有要保存的数据。当 用户关闭浏览器后，这些数据会被删除。
sessionStorage用于本地存储一个会话(session)中的数据，这些数据只有在同一个会话中的页面 才能访问，并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存 储，仅仅是会话级别的存储。
从上面的介绍我们可以看出，localStorage可以永久保存数据，而sessionStorage只能暂时保存 数据，这是两者之间的重要区别，在具体使用时应该注意。
Web Storage存储机制比传统的Cookie更加强大，弥补了Cookie诸多缺点，主要在以下几个方面 做了加强：
- Web Storage提供了易于使用的API接口，只需要设置键值对即可使用，简单方便
・在存储容量方面可以根据用户分配的磁盘配额进行存储，能够在每个用户域存储5MB〜 10MB的内容。用户不仅可以存储session,还可以存储许多信息，如设置偏好，本地化的数 据和离线数据等。
- Web Storage还提供了使用J avaScript编程的接口，开发者可以使用J avaScript客户端脚本实
现许多以前只能在服务器端才能完成的工作。
14-1-3 使用 Web Storage
如果浏览器支持Web Storage API，那么window对象中就会有localstorage和sessionstorage这 个属性。这个属性是一个原生对象，带有很多用于存储数据的属性和方法。信息是以键值对的形 式存储，值只能是字符串。
存储示例：我们可以通过setItem()方法来存储一个值，然后通过getItem()方法来获取值
在1.html里面设置localstorage的值
<body> <script> localStorage.setItem("name","xiejie");
console.log("信息已保存!");
</script>
</body>
接下来在2.htm l里面来获取已经设置了的值
<body> <script> let name = localStorage.getItem("name");
console.log(' 姓名为 ${name}');//姓名为 xiejie
</script>
</body>
这里，我们存储的值是存放于本地的，所以没有时间的限制，即使我们关闭浏览器，设置了的值 也依然存在。除了上面使用getItem()和setItem()来存取数据以外，我们还可以直接进行如 下的存值和取值操作，就好像是给一个属性赋值一样，如下：
在1.html里面设置localstorage的值
<body> <script> localStorage.setItem("name","xiejie");
localStorage.age = 18; console.log("信息已保存!");
</script>
</body>
接下来在2.htm I里面来获取已经设置了的值
<body>
<script>
let name = localStorage.getItem("name");
let age = localStorage.age;
console.log(' 姓名为 ${name}，年龄为 ${age}'); //姓名为xiejie，年龄为18
</script>
</body>
如果要删除本地存储中的一个条目，可以使用r emoveItem()方法或者直接使用delete运算 符，如下：
localStorage.removeItem("name");
//或者
delete localStorage.name
如果要彻底删除本地存储中所有的东西，可以使用clea r()方法，如下：
localStorage.clear()
14-1-4 storage 事件
每次将一个值存储到本地存储时，就会触发一个storage事件。由事件监听器发送给回调函数的 事件对象有几个自动填充的属性如下：
・key:告诉我们被修改的条目的键
- newValue：告诉我们被修改后的新值
- oldValue:告诉我们修改前的值
- storageArea:告诉我们是本地存储还是会话存储
・url：被改变键的文档地址
需要注意的是，这个事件只在同一域下的任何窗口或者标签上触发，并且只在被存储的条目改变 时触发。
示例如下：这里我们需要打开服务器进行演示，本地文件无法触发storage事件
- html代码如下：在该页面下我们设置了两个localstorage并存储了两个值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <title>Document</title>
</head>
<body>
<script> localStorage.name = "xiejie"; localStorage.age = 20;
console.log(“信息已经设置!");
</script>
</body>
</html>
- html代码如下：在该页面中我们安装了一个storage的事件监听器，安装之后只要是同一域下面 的其他storage值发生改变，该页面下面的storage事件就会被触发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"> <title>Document</title>
</head>
<body>
<script>
let name = localStorage.getItem("name");
let age = localStorage.age; console.log(' 姓名为 ${name}，年龄为 ${age}'); window.addEventListener("storage",(e)=>{ console.log('${e.key} 从${e.oldValue}修改为 ${e.newValue}'); console.log(' 这是一个 ${e.sto rageA rea}存储'); console.log(' 被改变的 url为 ${e.u rl}');
},true);
</script>
</body>
</html>
接下来我们来改变1.html里面localStorage.name的值
localSto rage.name ="谢杰";
之后我们就会看到安装在2.html页面里面的storage事件就会被触发，显示出如下效果:
name从xiej ie修改为谢杰
这是一个［object Storage］存储
被改变的 u r I 为 httD： //localhost/l, html
最后，需要说明一下的就是虽然Web Storage只能存储字符串看起来限制很大，但是通过使用 JSON,我们可以在本地存储中存储任何的JSON对象，如下：
let xiejie = {"name":"xiejie","age":18}; localStorage.setItem("info",JSON.stringify(xiejie));
这段代码会将xiejie这个对象存储为以info作为键的一个JSON字符串，当我们要将其取出来使用 的时候，只需要再使用JSON.pa rse方法将其转换回JSO N对象即可
xiejie = JSON.parse(localStorage.info);