เข้าถึงประวัติการท่องเว็บ (History API) ใน JavaScript

window.history (History API) ให้ควบคุมประวัติการนำทางของแท็บเบราว์เซอร์ได้: ดูความยาว (length), ย้อนกลับ (back()), ไปข้างหน้า (forward()), ไปตำแหน่งเฉพาะ (go(n)) และใน HTML5 เพิ่ม pushState(), replaceState() สำหรับ SPA (Single Page Applications)

ตัวอย่างโค้ด

<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>History API</title>
  <style>
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .result { font-size: 18px; font-weight: 500; color: rebeccapurple; }
  </style>
</head>
<body>
  <h1>เข้าถึงประวัติการท่องเว็บ (History API)</h1>
  <div class="result"></div>
  <button class="Btn">ดูความยาวประวัติ</button>
  <button class="Btn">ไปข้างหน้า (Forward)</button>
  <button class="Btn">ย้อนกลับ (Back)</button>
  <h3>กดปุ่มเพื่อทดสอบ History API</h3>
  <script>
    const resEle = document.querySelector(".result");
    const btnEle = document.querySelectorAll(".Btn");
    btnEle[0].addEventListener("click", () => {
      resEle.textContent = "history.length = " + window.history.length;
    });
    btnEle[1].addEventListener("click", () => {
      window.history.forward();
    });
    btnEle[2].addEventListener("click", () => {
      window.history.back();
    });
  </script>
</body>
</html>

ผลลัพธ์

กด "ดูความยาวประวัติ":

กด "ย้อนกลับ" จะกลับไปหน้าก่อนหน้า:

เมธอดหลักของ History API

การใช้งานใน SPA (pushState / replaceState)

// เปลี่ยน URL โดยไม่ reload
history.pushState({ page: "profile", userId: 123 }, "", "/profile/123");

// แทนที่ URL ปัจจุบัน (ไม่เพิ่ม history entry)
history.replaceState({ page: "home" }, "", "/");

// ฟังการเปลี่ยนแปลง (popstate)
window.addEventListener("popstate", (event) => {
  console.log("State changed:", event.state);
  // โหลดเนื้อหาตาม event.state
});

ข้อจำกัดด้านความปลอดภัย

• ไม่สามารถอ่าน URL จริงในประวัติได้ (privacy) — history.length แสดงแค่จำนวน
• pushState/replaceState URL ต้องเป็น same-origin
• ไม่สามารถล้างประวัติผู้ใช้ได้