HTML Academy · บทเรียน

pushState และ replaceState

อัปเดต URL ของเบราว์เซอร์โดยไม่โหลดหน้าทั้งหมดใหม่

pushState และ replaceState เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

ส่วนเชื่อมต่อประวัติการเรียกดู

ส่วนเชื่อมต่อประวัติการเรียกดูช่วยให้หน้าเว็บเปลี่ยน URL ที่แสดงในแถบที่อยู่ได้โดยไม่ทำให้เกิดการนำทางแบบเต็มหน้า เมื่อใช้ร่วมกับการแสดงผลฝั่งไคลเอ็นต์ จะช่วยให้สร้างแอปพลิเคชันหน้าเดียวที่ให้ความรู้สึกเหมือนแอปดั้งเดิม โดยยังคงใช้ URL ที่บันทึกเป็นบุ๊กมาร์กได้

pushState

history.pushState(state, "", url) จะเพิ่มรายการใหม่ลงในประวัติของเบราว์เซอร์ URL ในแถบที่อยู่จะอัปเดตทันทีโดยไม่ส่งคำขอเครือข่าย ผู้ใช้สามารถกลับไปยังรายการก่อนหน้าได้ด้วยปุ่มย้อนกลับของเบราว์เซอร์

history.pushState({ view: "settings" }, "", "/settings");

อาร์กิวเมนต์ state

อาร์กิวเมนต์แรกคือข้อมูลที่จัดรูปแบบให้จัดเก็บได้ตามต้องการ ซึ่งแนบไว้กับรายการนั้น อ่านข้อมูลกลับได้ภายหลังผ่าน history.state หรือในเหตุการณ์ popstate ใช้ข้อมูลนี้ส่งสถานะของส่วนติดต่อผู้ใช้ (เช่น แท็บใดเปิดอยู่หรือตำแหน่งการเลื่อน) เพื่อให้การย้อนกลับสามารถคืนมุมมองเดิมได้อย่างแม่นยำ

อาร์กิวเมนต์ชื่อเรื่อง

อาร์กิวเมนต์ตัวที่สองคือชื่อเรื่องของรายการในประวัติ ในทางปฏิบัติ เบราว์เซอร์สมัยใหม่ทั้งหมดจะไม่สนใจอาร์กิวเมนต์นี้ — ให้กำหนด document.title = "..." โดยตรงเพื่อเปลี่ยนชื่อเรื่อง โดยทั่วไปจะส่งสตริงว่างไป แต่ไม่มีผลใด ๆ

อาร์กิวเมนต์ url

อาร์กิวเมนต์ตัวที่สามคือที่อยู่ใหม่ ที่อยู่แบบสัมพัทธ์จะอ้างอิงกับหน้าปัจจุบัน ส่วนที่อยู่ใหม่ต้องมาจากต้นทางเดียวกัน มิฉะนั้นจะเกิด SecurityError เบราว์เซอร์จะไม่ดึงข้อมูลจากที่อยู่นั้น — pushState เพียงอัปเดตแถบที่อยู่และประวัติเท่านั้น

replaceState

history.replaceState(state, "", url) จะแทนที่รายการประวัติปัจจุบัน แทนที่จะเพิ่มรายการใหม่ ให้ใช้เมื่อคุณต้องการอัปเดตที่อยู่โดยไม่สร้างขั้นตอนใหม่สำหรับการย้อนกลับ เช่น การอัปเดตสตริงคำค้นหาของตัวกรอง

// Update query string in place
const url = new URL(location);
url.searchParams.set("filter", "open");
history.replaceState(null, "", url);

กรณีใช้งาน pushState

การเปลี่ยน route ใน SPA เช่น การคลิกลิงก์นำทางโดยไม่โหลดหน้าใหม่ทั้งหมด การเปิดหน้าต่างโมดัลเพื่อให้ปุ่มย้อนกลับปิดหน้าต่าง และการเปลี่ยนขั้นตอนในวิซาร์ด สถานะที่มีความหมายแต่ละสถานะควรเป็นรายการใหม่ในประวัติ เพื่อให้ปุ่มย้อนกลับทำงานอย่างที่ผู้ใช้คาดไว้

กรณีใช้งาน replaceState

การอัปเดตตัวกรอง การเรียงลำดับ หรือการแบ่งหน้า ซึ่งไม่ควรเพิ่มรายการที่ไม่จำเป็นลงในประวัติ การเปลี่ยนเส้นทางหลังกรอกแบบฟอร์มบางส่วนเสร็จ และการอัปเดตพารามิเตอร์การติดตามโดยไม่สร้างรายการที่ผู้ใช้ไปยังได้ เมื่อผู้ใช้กดปุ่มย้อนกลับ สถานะ “ระดับกลาง” เหล่านี้จะถูกข้ามไป

อัปเดตมุมมองหลังใช้ pushState

pushState เปลี่ยนเฉพาะที่อยู่เท่านั้น — โค้ดของคุณต้องอัปเดต DOM แยกต่างหาก รูปแบบคือ แสดงผลเนื้อหาใหม่ แล้วเรียก pushState ทั้งสองอย่างร่วมกันจึงทำให้เกิดประสบการณ์แบบ SPA

function navigate(path) {
  renderPage(path);
  history.pushState(null, "", path);
  window.scrollTo(0, 0);
}

อัปเดตชื่อเรื่องและเมตา

อัปเดต document.title และแท็กเมตาสำหรับชื่อเรื่องของการแชร์หลังการนำทาง เพื่อให้การแชร์บนโซเชียลมีเดียและชื่อแท็บเบราว์เซอร์สะท้อนมุมมองปัจจุบัน หากลืมทำเช่นนี้ การแชร์ครั้งถัดไปจะยังใช้ชื่อเรื่องเดิม ซึ่งเป็นบั๊ก SPA ที่พบได้บ่อยและสังเกตได้ยาก

เรียกใช้ pushState ครั้งแรกเมื่อโหลดหน้า

การเรียก pushState ก่อนที่ผู้ใช้จะนำทางจะเขียนทับรายการเริ่มต้น หากต้องการผูกสถานะกับรายการแรกของหน้า ให้ใช้ replaceState ซึ่งจะเพิ่มสถานะโดยไม่เปลี่ยนความลึกของประวัติ

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

ที่อยู่ที่ส่งให้ pushState ต้องมาจากต้นทางเดียวกัน การพยายามเรียก pushState ไปยัง https://evil.com จะทำให้เกิด SecurityError ข้อจำกัดนี้ช่วยป้องกันไม่ให้หน้าเว็บปลอมแปลงแถบที่อยู่จนผู้ใช้เข้าใจว่ากำลังอยู่บนเว็บไซต์อื่น

ตรวจสอบความเข้าใจ

history.replaceState ทำสิ่งใดที่ history.pushState ไม่ทำ

สรุป

pushState เพิ่มรายการใหม่ในประวัติโดยไม่โหลดหน้าใหม่ ซึ่งเป็นพื้นฐานของการกำหนดเส้นทางใน SPA ส่วน replaceState จะอัปเดตรายการปัจจุบันโดยตรง เหมาะสำหรับการเปลี่ยนที่อยู่เพื่อการแสดงผล ทั้งสองวิธีต้องใช้ที่อยู่จากต้นทางเดียวกันและไม่สนใจอาร์กิวเมนต์ชื่อเรื่อง อย่าลืมอัปเดต DOM แยกต่างหาก รวมถึงอัปเดต document.title และแท็กเมตาหลังการนำทางเสมอ

คำถามที่พบบ่อย

บทเรียน “pushState และ replaceState” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “pushState และ replaceState” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “pushState และ replaceState”

อัปเดต URL ของเบราว์เซอร์โดยไม่โหลดหน้าทั้งหมดใหม่ คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “pushState และ replaceState” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม

ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ HTML Academy