一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第25天，点击查看活动详情
浏览器API是HTML非常重要的功能。这些API比我们知道的强大得多。有一些很强大的API被低估了！
每个web开发人员都应该掌握这些api，掌握它们会让我们写出更好的代码
虽然有一些著名的API被我们所熟知，比如Web Storage API或Fetch API，但也有一些API被低估了，在教程中很少提及！现在让我们来看看！
1. The Battery API
Battery Status API（有时称为Battery API）提供有关计算机电池的信息。它显示电池的剩余容量和充电状态。它还评估了电池完全充电或放电所需的时间。
Battery Status API可以在 navigator中找到。navigator对象有一个getBattery（）方法。
这个API可以快速查询用户电池的状态，并在用户电池电量不足时使用它来实现电池节省功能，比如关闭一些高速消耗电池电量的后台进程。
getBattery()方法提供了系统的电量信息，返回一个battery的promise对象，然后resolve后得到[BatteryManager`](developer.mozilla.org/zh-CN/docs/…
BatteryManager对象，它提供一些事件，以及方法供我们监控电池的状态。
navigator.getBattery().then(function (battery) {
console.log(battery)
/*
charging: true
chargingTime: 0
dischargingTime: Infinity
level: 1
onchargingchange: null
onchargingtimechange: null
ondischargingtimechange: null
onlevelchange: null
*/
battery.addEventListener('chargingchange', function () {
alert(battery.charging ? '在充电' : '没在充电') //是否在充电
})
battery.addEventListener('dischargingtimechange', function (info) {
console.log(info) //电池剩余时间改变时触发该事件
})
battery.addEventListener('levelchange', function (info) {
console.log(info) //在电池电量水平改变时触发
})
})
2. The IndexedDB API
现有的浏览器存储方法有很多，例如：Cookie、LocalStorage、SessionDtorage，但是都不适合储存大量数据。Cookie 的大小不超过 4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各大浏览器不同）。而且不提供搜索功能，不能建立自定义的索引。所以，需要一种新的解决方案，这就是 IndexedDB 诞生的背景。 IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。
以下是我们访问IndexDB的方式：
let indexedDB = window.indexedDB;
要了解有关此API的更多信息，请访问该链接。
3. The Clipboard API
网站的复制功能大家都用过，是否有想过这是如何实现的？这正是Clipboard API发挥作用的地方。 Clipboard API异步读取和写入系统剪贴板，作为剪贴板操作（剪切、复制和粘贴）的响应。 它的所有操作都是异步的，返回 Promise 对象，不会造成页面卡顿。而且，它可以将任意内容（比如图片）放入剪贴板。
const clipboardObj = navigator.clipboard;
navigator.clipboard属性返回 Clipboard 对象，所有操作都通过这个对象进行。
如果navigator.clipboard属性返回undefined，就说明当前浏览器不支持这个 API。
由于用户可能把敏感数据（比如密码）放在剪贴板，允许脚本任意读取会产生安全风险，所以这个 API 的安全限制比较多。引自剪贴板操作 Clipboard API 教程
4. Page Visibility API
使用浏览器选项卡浏览网页时，无法同时访问部分（或全部）选项卡。页面Visibility API是一种浏览器API，允许我们查看哪些浏览器选项卡处于活动状态，哪些处于非活动状态。
我们可以使用页面Visibility API来检测用户何时离开或进入网页。我们可以使用它来运行某些操作，比如当用户返回页面时更新一些数据，或者检测应用程序（如测验应用程序）的页面离开。
我们可以使用一个特殊的事件监听器来检测页面可见性状态的变化。
const handlePageChange = () => {
document.hidden
? console.log(`User left the page at ${new Date()}`)
: console.log(`User opened the page at ${new Date()}`)
}
document.addEventListener("visibilitychange", handlePageChange);
另外，还有一些其他非常酷的API，如地理定位API、Web动画API、全屏API，还有Canvas API。我们也可以用这些api做很多有趣的工作。
