HTML5中有哪些简单实用的API？_行业百科

HTML5中5个简单实用的API包括：，1. LocalStorage 存储键值对数据，浏览器关闭后数据依旧存在。，2. sessionStorage 存储会话级别的数据，页面刷新或关闭后数据丢失。，3. Geolocation API 获取用户地理位置信息。，4. Web Workers 在后台运行JavaScript代码，不影响页面性能。，5. Canvas API 提供绘制图形、动画等功能。

HTML5 提供了许多强大的 API，极大地增强了网页的功能和交互性，以下是五个简单且实用的 HTML5 API：

全屏API

功能	代码示例
进入全屏模式	```javascript const elem = document.documentElement; if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.webkitRequestFullscreen) { elem.webkitRequestFullscreen(); } else if (elem.msRequestFullscreen) { elem.msRequestFullscreen(); }```
退出全屏模式	```javascript if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); }```

可见性API

功能	代码示例
判断当前页面是否被用户可见	```javascript document.addEventListener("visibilitychange", function() { console.log(document.visibilityState); });```
强制让页面始终保持活跃状态	``javascript let hidden, visibilityChange; if (typeof document.hidden !== "undefined") { hidden = "hidden"; visibilityChange = "visibilitychange"; } else if (typeof document.msHidden !== "undefined") { hidden = "msHidden"; visibilityChange = "msvisibilitychange"; } else if (typeof document.webkitHidden !== "undefined") { hidden = "webkitHidden"; visibilityChange = "webkitvisibilitychange"; } if (typeof document.addEventListener !== "undefined" && hidden) { document.addEventListener(visibilityChange, function() { if (document[hidden]) { document.title = "Sorry, you left the page!"; } else { document.title = "Welcome back!"; } }); }``

拍照API

功能	代码示例
获取摄像头	```javascript navigator.mediaDevices.getUserMedia({ video: true }).then(function(stream) { const video = document.querySelector('video'); video.srcObject = stream; });```
拍照	```javascript const canvas = document.getElementById('canvas'); const context = canvas.getContext('2d'); document.getElementById('capture').addEventListener('click', function() { context.drawImage(video, 0, 0, 640, 480); });```

预加载API

功能	代码示例
预加载图片	```html` ``
预加载音频	```html` ``
预加载字体	```html` ``

电池状态API

功能代码示例

获取电池状态 ``javascript navigator.getBattery().then(function(battery) { console.log('Battery charging:', battery.charging); console.log('Battery level:', battery.level); console.log('Battery charging time:', battery.chargingTime); console.log('Battery discharging time:', battery.dischargingTime); battery.addEventListener('chargingchange', function() { console.log('Battery charging:', battery.charging); }); });``