Web API 是什麼？瀏覽器內建 API 分類介紹

Q: Web API 與 JavaScript 是同一件事嗎？

不是。JavaScript 是語言本身，Web API 是瀏覽器額外提供的能力。所以 document 與 fetch 這些在 Node.js 環境中不一定存在。

Q: 怎麼知道某個 Web API 能不能用？

查閱 MDN 的瀏覽器相容性表格，或在程式中先偵測，例如：判斷 window 上有沒有該屬性再使用，避免在不支援的環境直接報錯。

Q: localStorage 與 sessionStorage 差在哪裡？

兩者用法相同，差別在存活時間。localStorage 關掉瀏覽器後仍保留，sessionStorage 只在該分頁的工作階段內有效，關掉分頁就消失。

Web API（Application Programming Interface） 是一組預先定義的函式和方法，讓開發者可以與 Web 瀏覽器或網路服務進行互動。以下我們就以瀏覽器內建的 Web API 幫各位做些分類：

先分清楚兩件事

JavaScript 是語言本身，提供的是語法與內建物件；Web API 是 瀏覽器 額外給的能力。所以 document、fetch 這些東西在其他執行環境不一定存在。

DOM API

主要是操作 HTML 和 CSS 的核心 API，大致上就是，取得元素、新增或刪除節點、操作 class 與 style、事件綁定。

有沒有覺得有些熟悉？沒錯！就是前面介紹的 DOM 選取、事件處理、DOM 物件這幾項分類。因此，Away 就不再贅述了！

定時與排程 API

讓程式碼可以 延遲執行 或 定時重複，代表成員是 setTimeout() 與 setInterval()。兩者都會回傳一個編號，要停下來就把編號交給對應的清除方法。

方法	說明
`setTimeout()`	延遲指定時間後執行一次。
`setInterval()`	每隔指定時間重複執行。
`clearTimeout()`、`clearInterval()`	用回傳的編號取消排程。
去彈跳、節流	收斂密集觸發的事件，最常見的兩種應用。

詳細用法請見定時與排程 API 。

網路 API

與伺服器通訊（AJAX 請求、Fetch）。現在主流是 fetch()，它回傳 Promise，搭配 async 與 await 使用：

async function getUsers() {
  try {
    const res = await fetch('/api/users');
    const data = await res.json();

    console.log(data);
  } catch (err) {
    console.error(err.message);
  }
}

小提醒

網路請求隨時可能失敗，一定要用 try...catch 或 catch() 接住錯誤，並在畫面上告知使用者。

儲存與資料庫 API

在瀏覽器端儲存資料，最常用的是 localStorage 與 sessionStorage：

// 寫入
localStorage.setItem('name', 'Away');

// 讀取
console.log(localStorage.getItem('name'));

// 移除
localStorage.removeItem('name');

API	存活時間	適合放
`localStorage`	直到手動清除	使用者偏好設定
`sessionStorage`	該分頁關閉即消失	一次性的暫存狀態
IndexedDB	直到手動清除	大量結構化資料

注意

兩種 Storage 只能存字串，物件請先用 JSON.stringify() 轉換，讀取時再用 JSON.parse() 還原。另外，不要在裡面放密碼或權杖這類敏感資料。

其他常見的 Web API

API	用途
Geolocation	取得使用者位置，需要授權
Clipboard	讀寫剪貼簿
Intersection Observer	偵測元素是否進入可視範圍，做延遲載入很好用
History	操作瀏覽紀錄與網址，前端路由的基礎
Notification	顯示系統通知，需要授權

小提醒

涉及隱私或裝置權限的 API，例如：定位、相機、通知，瀏覽器都會先向使用者詢問。被拒絕時程式要自己處理，別假設一定會成功。