JavaScript Reference - Tập 1: Web APIs phổ biến (Fetch, Storage, Geolocation)

Table of contents

1. Web Storage API (Lưu trữ dữ liệu)

Thay vì dùng Cookies rắc rối, Web Storage mang lại cách lưu trữ key-value trực quan hơn.

• localStorage: Dữ liệu được lưu mãi mãi (ngay cả khi tắt trình duyệt).
• sessionStorage: Dữ liệu mất đi khi đóng tab.

Ví dụ localStorage:

// Ghi dữ liệu
localStorage.setItem("username", "TuanNDA");

// Đọc dữ liệu
const user = localStorage.getItem("username");

2. Fetch API (Giao tiếp Server)

Đây là chuẩn hiện đại để lấy dữ liệu từ một URL. Nó dựa trên Promise và thay thế hoàn toàn cho XMLHttpRequest cũ kỹ.

async function getGitHubProfile(username) {
  const response = await fetch(`https://api.github.com/users/${username}`);
  const data = await response.json();
  console.log(data);
}

3. Geolocation API (Định vị vị trí)

Dùng để xác định tọa độ kinh độ và vĩ độ của người dùng (cần sự đồng ý của họ).

navigator.geolocation.getCurrentPosition((position) => {
  console.log("Vĩ độ: " + position.coords.latitude);
  console.log("Kinh độ: " + position.coords.longitude);
});

4. History API (Điều hướng)

Cho phép bạn thao tác với lịch sử duyệt web của trình duyệt, giúp tạo ra các ứng dụng Single Page Application (SPA) mượt mà mà không cần tải lại trang.

Lời kết Tập 1

Web APIs mở ra cánh cửa để JavaScript tương tác sâu hơn với phần cứng và internet. Trong tập tiếp theo, chúng ta sẽ đi sâu vào danh mục các phương thức xử lý Strings và Numbers cực kỳ hữu ích.

Hẹn gặp lại các bạn!