掌握各種 Web API 可以顯著增強 Web 應用程式的功能和使用者體驗。這些 API 為開發人員提供了以以前不可能的方式與瀏覽器互動的工具。在這裡，我們將探索 12 個基本的 Web API，解釋它們的功能，並提供程式碼範例來幫助您在專案中實現它們。
Web Storage API（包括 localStorage 和 sessionStorage）可讓您在 Web 瀏覽器中儲存鍵值對。它對於保存使用者首選項或在會話之間保留資料非常有用。
// Save data to localStorage
localStorage.setItem('userName', 'Vishal');
// Retrieve data from localStorage
const user = localStorage.getItem('userName');
// Clear localStorage
localStorage.removeItem('userName');
了解更多關於儲存 API 的資訊
付款請求 API 透過在各種付款方式中提供一致的使用者體驗，簡化了在網路上接受付款的流程。
if (window.PaymentRequest) {
const payment = new PaymentRequest([{
supportedMethods: 'basic-card'
}], {
total: { label: 'Total', amount: { currency: 'USD', value: '10.00' } }
});
payment.show().then(result => {
// Process payment result
console.log(result);
}).catch(error => {
console.error('Payment failed:', error);
});
}
了解更多關於付款請求 API 的資訊
DOM（文件物件模型）API 允許您操作文件的結構、樣式和內容。這是 Web 開發中使用最廣泛的 API 之一。
// Select and update an element
const element = document.querySelector('#myElement');
element.textContent = 'Hello, World!';
了解更多關於 DOM API 的資訊
HTML Sanitizer API 有助於清理不受信任的 HTML 內容，以避免 XSS（跨站腳本）攻擊等安全風險。
const dirtyHTML = '<img src="javascript:alert(1)">'; const cleanHTML = sanitizer.sanitize(dirtyHTML); console.log(cleanHTML); // Safe HTML output
了解更多 HTML Sanitizer API 的資訊
Canvas API 允許您使用
const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
context.fillStyle = 'blue';
context.fillRect(10, 10, 150, 100);
了解更多關於 Canvas API 的資訊
History API 可讓您與瀏覽器的會話歷史記錄進行交互，從而允許您操作瀏覽器的歷史堆疊（例如，pushState、replaceState）。
history.pushState({ page: 1 }, 'title', '/page1');
history.replaceState({ page: 2 }, 'title', '/page2');
了解更多歷史API
剪貼簿 API 讓您可以讀取和寫入剪貼簿，從而啟用複製貼上功能等功能。
navigator.clipboard.writeText('Hello, Clipboard!').then(() => {
console.log('Text copied to clipboard');
}).catch(err => {
console.error('Failed to copy text:', err);
});
了解更多關於剪貼簿 API 的資訊
全螢幕 API 讓您以全螢幕模式呈現特定元素或整個網頁，這對於視訊或遊戲等沉浸式體驗非常有用。
document.getElementById('myElement').requestFullscreen().catch(err => {
console.error(`Error attempting to enable full-screen mode: ${err.message}`);
});
了解更多關於全螢幕 API 的資訊
FormData API 簡化了建立表示表單欄位及其值的鍵/值對的過程，以便透過 XHR 或 Fetch 更輕鬆地提交表單資料。
const form = document.querySelector('form');
const formData = new FormData(form);
fetch('/submit', {
method: 'POST',
body: formData
}).then(response => {
if (response.ok) {
console.log('Form submitted successfully!');
}
});
了解更多關於 FormData API 的資訊
Fetch API 提供了一種現代且靈活的方式來發出非同步網路請求，為 XMLHttpRequest 提供了更簡單、基於承諾的替代方案。
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error fetching data:', error));
了解更多關於 Fetch API 的資訊
拖放 API 讓您在 Web 應用程式中實現拖放功能，從而透過直覺的 UI 元素增強使用者互動。
const item = document.getElementById('item');
item.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', item.id);
});
了解更多關於拖放 API 的資訊
地理定位 API 提供對用戶設備地理位置資訊的訪問，從而啟用基於位置的服務和功能。
navigator.geolocation.getCurrentPosition((position) => {
console.log(`Latitude: ${position.coords.latitude}, Longitude: ${position.coords.longitude}`);
}, (error) => {
console.error(`Error getting location: ${error.message}`);
});
了解更多有關地理定位 API 的資訊
這些 Web API 為創建高度互動、用戶友好的 Web 應用程式開闢了無限可能。從儲存和支付到地理定位和圖形，掌握這些 API 可以將您的 Web 開發技能提升到一個新的水平。
透過了解如何在專案中有效地實現這些 API，您可以顯著增強功能和使用者體驗。
如果您發現本指南有用，請考慮與其他人分享！ ？
Ce blog fournit un aperçu mis à jour des API Web essentielles que tout développeur devrait connaître, tout en incorporant des explications claires et des exemples de code pratiques pour chacune.
以上是每個開發人員都應該了解的基本 Web API的詳細內容。更多資訊請關注PHP中文網其他相關文章！
