掌握現代 Web API：2024 年強大瀏覽器功能指南
昨天看到一篇文章，一位開發者整理了目前最常用的 Web APIs，并提供了使用實例。
加上最近這幾年，Web API 確實提供了越來越豐富的功能。所以今天，咱們就來看看，目前提供了強大能力的 Web APIs。
1. 支付請求API：簡化在線交易
付款請求 API 改變了電子商務網站。它標準化了結賬流程，使在線支付更加順暢和安全。
主要特點：
- 記住用戶付款信息
- 減少結賬步驟
- 支持多種付款方式
const paymentRequest = new PaymentRequest(paymentMethods, paymentDetails, options);
paymentRequest.show()
.then(paymentResponse => {
// Process the payment
})
.catch(error => {
console.error('Payment error:', error);
});2. 存儲 API：高效管理數據
現代 Web 應用需要強大的數據存儲解決方案。存儲 API 提供各種方法來存儲客戶端數據，從而提高性能和離線功能。
存儲 API 的類型：
Web 存儲 API
- localStorage：即使瀏覽器窗口關閉后仍保留數據
- sessionStorage：存儲一個會話的數據
localStorage.setItem('username', 'JohnDoe');
const username = localStorage.getItem('username');IndexedDB API 非常適合存儲大量結構化數據。
const request = indexedDB.open('MyDatabase', 1);
request.onsuccess = (event) => {
const db = event.target.result;
// Use the database
};Cookie Store API 一種用于管理 Cookie 的現代、基于承諾的 API。
await cookieStore.set('theme', 'dark');
const themeCookie = await cookieStore.get('theme');3. DOM API：操作文檔結構
文檔對象模型 (DOM) API 是動態網頁的支柱，允許 JavaScript 與 HTML 和 XML 文檔進行交互。
const newElement = document.createElement('div');
newElement.textContent = 'Hello, World!';
document.body.appendChild(newElement);4. HTML Sanitizer API：增強安全性
隨著用戶生成內容的興起，HTML Sanitizer API 通過安全地將不受信任的 HTML 插入 DOM 來防止 XSS 攻擊至關重要。
const sanitizer = new Sanitizer();
const cleanHTML = sanitizer.sanitizeFor('div', untrustedHTML);5. Canvas API：創建動態圖形
Canvas API 為 2D 和 3D 圖形、游戲和數據可視化開辟了無限可能。
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 150, 100);6. History API：管理瀏覽器歷史記錄
History API 允許操作瀏覽器會話歷史記錄，使單頁應用程序無需重新加載整個頁面即可更新 URL。
history.pushState({page: 2}, "Page 2", "/page2");7. 剪貼板 API：改進復制粘貼功能
Clipboard API 提供了一種從系統剪貼板讀取和寫入的安全方法，增強了 Web 應用程序的用戶體驗。
navigator.clipboard.writeText('Hello, Clipboard!')
.then(() => console.log('Text copied to clipboard'))
.catch(err => console.error('Failed to copy: ', err));8. 全屏 API：沉浸式用戶體驗
全屏 API 允許 Web 應用程序使用整個屏幕，非常適合視頻播放器、游戲和演示文稿。
document.getElementById('fullscreenButton').addEventListener('click', () => {
document.documentElement.requestFullscreen();
});9. FormData API：簡化表單處理
FormData API 簡化了收集表單數據以供提交或處理的過程。
const form = document.querySelector('form');
form.addEventListener('submit', (e) => {
e.preventDefault();
const formData = new FormData(form);
for (let [key, value] of formData.entries()) {
console.log(key, value);
}
});10. Fetch API：現代網絡請求
Fetch API 提供了一種強大而靈活的方式來發出網絡請求，取代了舊的 XMLHttpRequest。
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));11.拖放 API：交互式用戶界面
拖放 API 允許您創建直觀的界面，用戶可以在頁面上拖動元素。
const draggable = document.getElementById('draggable');
draggable.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', e.target.id);
})12. 地理位置 API：位置感知 Web 應用程序
地理位置 API 使網絡應用程序能夠訪問用戶的地理位置，為基于位置的服務開辟了可能性。
navigator.geolocation.getCurrentPosition((position) => {
console.log(`Latitude: ${position.coords.latitude}, Longitude: ${position.coords.longitude}`);
}, (error) => {
console.error('Geolocation error:', error);
});
