阅读量:0
HTML5提供了许多实用的API，如
localStorage用于客户端存储，fetch用于网络请求，FileReader读取文件，WebSocket实现实时通信，以及Canvas API进行图形绘制。| 序号 | API名称 | 功能描述 | 代码示例 |
| 1 | Fullscreen API | 允许开发者通过编程控制页面进入全屏模式，非常适合游戏开发。 | element.requestFullScreen() |
| 2 | Page Visibility API | 监听用户当前关注的页面选项卡以及窗口状态，可用于优化资源消耗。 | document.addEventListener("visibilitychange", callback) |
| 3 | getUserMedia API | 访问用户的摄像头和麦克风，结合 | navigator.getUserMedia() |
| 4 | Battery API | 监控移动设备的电池状态，包括电量和充电状态等。 | navigator.getBattery() |
| 5 | Link Prefetching API | 在后台预加载网页资源，提高用户浏览体验。 | |
FAQs
Q1: Fullscreen API如何在不支持全屏API的浏览器中使用？
A1: 在不支持Fullscreen API的浏览器中，可以使用私有前缀版本的方法，如mozRequestFullScreen、webkitRequestFullScreen和msRequestFullscreen，以确保兼容性。
Q2: 使用getUserMedia API时如何确保安全性和用户隐私？
A2: 在使用getUserMedia API时，必须确保请求用户的明确许可，并在获取到媒体流后妥善处理，避免泄露用户隐私，应当在不需要使用媒体流时及时释放资源。
1、localStorage API
功能描述：localStorage API 允许网页在不依赖服务器或浏览器会话的情况下存储数据，它提供了一种在用户浏览器中持久化存储数据的方法。
使用方法：
```javascript
// 设置值
localStorage.setItem('key', 'value');
// 获取值
var value = localStorage.getItem('key');
// 删除键值对
localStorage.removeItem('key');
// 清空所有存储的数据
localStorage.clear();
```
示例：
```html
<script>
// 设置localStorage
localStorage.setItem('username', 'JohnDoe');
// 获取localStorage
var username = localStorage.getItem('username');
console.log(username); // 输出: JohnDoe
</script>
```
2、sessionStorage API
功能描述：sessionStorage API 与localStorage类似，但它仅在当前会话中有效，当会话结束时（即浏览器关闭时），存储的数据会被清除。
使用方法：
```javascript
// 设置值
sessionStorage.setItem('key', 'value');
// 获取值
var value = sessionStorage.getItem('key');
// 删除键值对
sessionStorage.removeItem('key');
// 清空所有存储的数据
sessionStorage.clear();
```
示例：
```html
<script>
// 设置sessionStorage
sessionStorage.setItem('message', 'Hello World!');
// 获取sessionStorage
var message = sessionStorage.getItem('message');
console.log(message); // 输出: Hello World!
</script>
```
3、Geolocation API
功能描述：Geolocation API 允许网站访问用户的地理位置信息，前提是用户授权。
使用方法：
```javascript
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
console.log('Geolocation is not supported by this browser.');
}
function showPosition(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
console.log('Latitude: ' + latitude + ', Longitude: ' + longitude);
}
```
示例：
```html
<script>
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(showPosition);
} else {
console.log('Geolocation is not supported by this browser.');
}
}
function showPosition(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
console.log('Latitude: ' + latitude + ', Longitude: ' + longitude);
}
</script>
<button onclick="getLocation()">Show My Location</button>
```
4、Canvas API
功能描述：Canvas API 提供了一个可以在网页上绘图的画布，允许使用JavaScript进行绘图操作。
使用方法：
```javascript
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
// 绘制矩形
ctx.fillStyle = '#FF0000';
ctx.fillRect(0, 0, 150, 100);
```
示例：
```html
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#FF0000';
ctx.fillRect(0, 0, 150, 100);
</script>
```
5、WebSockets API
功能描述：WebSockets API 允许在网页和服务器之间建立一个持久的连接，用于双向通信。
使用方法：
```javascript
var socket = new WebSocket('ws://example.com/socketserver');
// 连接打开时触发
socket.onopen = function(event) {
socket.send('Hello Server!');
};
// 接收到消息时触发
socket.onmessage = function(event) {
console.log('Message from server: ' + event.data);
};
// 连接关闭时触发
socket.onclose = function(event) {
console.log('Connection closed');
};
// 错误事件触发
socket.onerror = function(error) {
console.log('Error: ' + error.message);
};
```
示例：
```html
<script>
var socket = new WebSocket('ws://example.com/socketserver');
socket.onopen = function(event) {
socket.send('Hello Server!');
};
socket.onmessage = function(event) {
console.log('Message from server: ' + event.data);
};
socket.onclose = function(event) {
console.log('Connection closed');
};
socket.onerror = function(error) {
console.log('Error: ' + error.message);
};
</script>
```
