ฉันได้อ่านและค้นหาข้อดี / ข้อเสียระหว่าง&replaceState() pushState()อ่านบทความของ Mozilla และการทดสอบที่น่าสนใจนี้แต่ก็ยังไม่ชัดเจนสำหรับฉันถึงความแตกต่าง
มีใครสนใจที่จะอธิบายในสิ่งที่พวกเขาแตกต่าง?
คำตอบ:
replaceState()จะเปลี่ยน URL ในเบราว์เซอร์ (เช่นการกดปุ่มย้อนกลับจะไม่นำคุณกลับ)
pushState() จะเปลี่ยน URL และเก็บ URL เก่าไว้ในประวัติเบราว์เซอร์ (เช่นการกดปุ่มย้อนกลับจะนำคุณกลับ)
จากลิงค์ของคุณ
history.replaceState () ทำงานเหมือนกับ history.pushState () ยกเว้นว่า replaceState () แก้ไขรายการประวัติปัจจุบันแทนที่จะสร้างรายการใหม่
replaceState () มีประโยชน์อย่างยิ่งเมื่อคุณต้องการอัปเดตออบเจ็กต์สถานะหรือ URL ของรายการประวัติปัจจุบันเพื่อตอบสนองการดำเนินการบางอย่างของผู้ใช้
หากคุณต้องการเพียงแค่ต้องการอัปเดตรายการประวัติให้ใช้replaceState()อย่างอื่นpushState()ซึ่งจะเก็บรายการเก่าไว้และสร้างรายการใหม่ มีลักษณะคล้ายกัน แต่ทั้งสองอย่างมีผลต่างกันดังนั้นจึงขึ้นอยู่กับว่าคุณต้องการแทนที่หรือสร้างรายการประวัติใหม่หรือไม่
ลองคิดดูว่าฉันกำลังจัดการไพ่หนึ่งสำรับโดยวางไพ่หนึ่งใบบนอีกใบหนึ่ง (หงายหน้า) และคุณสามารถนำไพ่ใบบนสุดในกองเท่านั้น (เช่นไพ่ใบสุดท้ายที่ฉันแจก) สมมติว่าฉันใส่ Jack of Hearts ไว้บนกอง ตอนนี้สำหรับการ์ดใบต่อไปถ้าฉันใช้replaceStateดังนั้นฉันจึงถอด Jack of Hearts นั้นออกและใส่การ์ดใบถัดไป จำนวนการ์ดเท่ากันเนื่องจากเราเพิ่งเปลี่ยนการ์ดใบบนสุด ถ้าฉันใช้pushStateแทนฉันจะวางไพ่ใบต่อไปที่ด้านบนของ Jack of Hearts (ตอนนี้ทั้งคู่มีอยู่ในกองและกองก็สูงกว่าไพ่หนึ่งใบ)
สลับการ์ดในการเปรียบเทียบกับ URL และนั่นคือวิธีแก้ไขประวัติ URL
history.replaceState()เพื่อต่อท้ายแบบสอบถามที่ท้าย URL ของฉัน แต่เมื่อฉันย้อนกลับไปฉันไปที่ url โดยไม่มีการสืบค้นต่อท้าย เหมือนเป๊ะpushState(). !! ไม่ควรอัปเดต url ปัจจุบันใช่หรือไม่