17370845950

Web API 是浏览器提供的、非 JavaScript 语言原生的接口集合，挂载于全局对象（如 window），涵盖 DOM 操作、网络请求（fetch/XmlHttpRequest/WebSocket/AbortController）、设备访问（地理定位/媒体设备/屏幕信息/蓝牙/USB）、存储方案（localStorage/sessionStorage/IndexedDB/Cache API/Service Worker/Credentials API）及持续演进的兼容性注意事项。

JavaScript 的 Web API 是浏览器提供的一套接口，让 JS 代码能与浏览器环境和设备进行交互，不是 JavaScript 语言本身的一部分，而是由浏览器实现并挂载在全局对象（如 window）上的功能集合。

DOM 操作能力

Web API 提供了对网页结构的完整控制能力，核心是 Document Object Model（DOM）相关接口。通过 document.querySelector()、element.addEventListener()、document.createElement() 等方法，JS 可以动态读取、修改、添加或删除页面元素，响应用户点击、输入、滚动等行为。

网络请求与数据交互

现代 Web API 支持多种异步通信方式：

• fetch()：基于 Promise 的主流 HTTP 请求接口，支持 JSON、表单、文件上传等
• XMLHttpRequest：传统但仍在维护的请求方式，兼容性更广
• WebSocket：建立持久双向连接，适合实时聊天、行情推送等场景
• AbortController：用于主动中止 fetch 或其他异步操作

设备与用户环境访问

浏览器允许 JS 在权限许可下获取部分硬件和系统信息：

• navigator.geolocation：获取用户地理位置（需用户授权）
• navigator.mediaDevices.getUserMedia()：访问摄像头和麦克风（如视频通话）
• screen.orientation、window.matchMedia()：检测屏幕方向、尺寸、深色模式等
• navigator.bluetooth、navigator.usb：实验性 API，支持蓝牙/USB 外设通信（需 HTTPS 和用户授权）

存储与离线能力

Web API 提供多种客户端数据持久化方案：

• localStorage / sessionStorage：简单键值对存储，前者长期保留，后者仅限当前会话
• IndexedDB：浏览器内置的低级 NoSQL 数据库，适合大量结构化数据
• Cache API + Service Worker：实现离线缓存、PWA 离线加载与后台同步
• Credentials Management API：安全地保存和自动填充账号密码（配合 WebAuthn）

基本上就这些——Web API 不是固定不变的标准，而是一组持续演进的规范集合，不同浏览器支持程度略有差异，使用前建议查 caniuse.com 或 MDN 文档确认兼容性。