html网页的api怎么用？html接口调用方法详解

‘;element.classList.add()| 向元素添加 CSS 类 |el.classList.add(‘active’);document.createElement()| 创建新的 HTML 元素节点 |const newP = document.createElement(‘p’);` |

Fetch API（网络请求）

Fetch API 提供了一种现代、基于 Promise 的方式，用于在 Web 浏览器中发起 HTTP 请求，它取代了传统的 XMLHttpRequest，代码更简洁，功能更强大。

• 核心功能：

  • 发起 GET、POST、PUT、DELETE 等 HTTP 请求。
  • 处理响应数据（JSON、文本、二进制等）。
  • 处理请求头和错误状态。

• 基本用法示例：

// 发起 GET 请求
fetch('https://api.example.com/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json(); // 解析 JSON 数据
  })
  .then(data => {
    console.log('Success:', data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

• Fetch 选项配置表：

LocalStorage 和 SessionStorage API（客户端存储）

这些 API 允许网页在用户的浏览器中存储键值对数据，与 Cookie 不同，这些数据不会自动发送到服务器，且容量更大。

• LocalStorage：

  • 数据持久化存储,除非手动清除，否则数据会一直保留。
  • 跨标签页和窗口共享（同源策略下）。

• SessionStorage：

  • 数据仅在当前浏览器会话期间有效,关闭标签页后数据丢失。
  • 每个标签页拥有独立的存储空间。

• 常用方法表：

  

注意：localStorage 和 sessionStorage 只能存储字符串，如果需要存储对象或数组，需使用 JSON.stringify() 进行序列化，并使用 JSON.parse() 进行反序列化。

Geolocation API（地理位置）

该 API 允许网页获取用户的地理位置信息（经度、纬度、精度等），由于涉及隐私，浏览器会弹出权限请求对话框。

• 核心方法：

  • navigator.geolocation.getCurrentPosition()：获取一次当前位置。
  • navigator.geolocation.watchPosition()：持续监听位置变化。
  • navigator.geolocation.clearWatch()：停止位置监听。

• 示例代码：

if ("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition(
    (position) => {
      console.log('纬度:', position.coords.latitude);
      console.log('经度:', position.coords.longitude);
    },
    (error) => {
      console.error('获取位置失败:', error.message);
    }
  );
} else {
  console.error('浏览器不支持地理定位');
}

Web Workers API（多线程处理）

Web Workers 允许在后台线程中运行 JavaScript 脚本，而不会影响主线程（UI 线程）的响应性，这对于执行计算密集型任务（如图像处理、大数据解析）非常有用。

• 核心概念：

  • Worker 线程无法直接访问 DOM。
  • 主线程与 Worker 线程通过 postMessage() 和 onmessage 事件进行通信。

• 简单示例：

  

// 主线程
const worker = new Worker('worker.js');
worker.postMessage('Hello Worker');
worker.onmessage = (event) => {
  console.log('收到 Worker 消息:', event.data);
};
// worker.js
self.onmessage = (event) => {
  console.log('收到主线程消息:', event.data);
  self.postMessage('Hello Main Thread');
};

其他常用 Web APIs

相关问题与解答

问题 1：Fetch API 和 XMLHttpRequest 有什么区别？为什么推荐使用 Fetch？

解答：
Fetch API 和 XMLHttpRequest（XHR）都是用于发起 HTTP 请求的 Web API，但 Fetch 是更现代的标准，具有以下优势：

1. 基于 Promise：Fetch 返回 Promise 对象，支持 .then() 和 .catch() 链式调用，或使用 async/await 语法，代码更简洁、易读，避免了 XHR 的“回调地狱”问题。
2. 更清晰的 API 设计：Fetch 的配置选项更加直观，例如通过 method、headers、body 等属性直接设置请求参数，而 XHR 需要通过 setRequestHeader 等方法逐个设置。
3. 更好的错误处理：Fetch 在遇到网络错误（如 DNS 失败）时会拒绝 Promise，但需要注意的是，Fetch 不会在 HTTP 错误状态（如 404、500）时自动拒绝，需要手动检查 response.ok。
4. 流式响应：Fetch 支持通过 response.body 获取可读流，适合处理大型文件下载或上传，而 XHR 通常需要一次性加载整个响应体。

尽管 Fetch 有诸多优点，但在需要支持非常旧的浏览器（如 IE11）时，可能需要使用 XHR 或引入 polyfill。

问题 2：LocalStorage 和 SessionStorage 的主要区别是什么？在实际开发中如何选择？

解答：
LocalStorage 和 SessionStorage 都是 Web Storage API 的一部分，用于在客户端存储数据，它们的主要区别在于数据的生命周期和作用域：

1. 生命周期：

   • LocalStorage：数据是持久化的，除非用户手动清除浏览器缓存或通过 JavaScript 调用 removeItem() 或 clear()，否则数据会一直保留，即使关闭浏览器并重新打开，数据依然存在。
   • SessionStorage：数据仅在当前浏览器会话期间有效，当用户关闭标签页或窗口时，存储的数据会被自动清除，如果用户在新标签页中打开同一网站，它会创建一个新的会话，拥有独立的存储空间。

2. 作用域：

   • LocalStorage：在所有同源（相同协议、域名、端口）的标签页和窗口之间共享，在一个标签页中存储的数据，可以在另一个同源标签页中读取。
   • SessionStorage：数据仅在当前标签页内有效，不同标签页即使访问同一网站，也无法共享 SessionStorage 中的数据。

选择建议：

• 如果需要长期保存用户偏好设置、登录状态（需配合安全考虑）、或需要跨标签页共享的数据，应使用 LocalStorage。
• 如果数据仅在当前页面交互过程中需要,如表单临时数据、一次性令牌、或希望关闭页面后自动清理敏感信息，应使用 SessionStorage。
• 注意：由于 Web Storage 只能存储字符串，且容量有限（通常每个域名 5-10MB），不适合存储大量数据或二进制文件，对于更复杂的数据管理，可以考虑 IndexedDB。