Gắn thông số vào URL mà không cần làm mới

Question

Tôi biết điều này đã được hỏi nhiều lần trước đây nhưng câu trả lời không đủ mô tả để giải quyết vấn đề của tôi. Tôi không muốn thay đổi toàn bộ URL của trang. Tôi muốn nối thêm một tham số &item=brand vào nút bấm mà không cần làm mới.

Sử dụng document.location.search += '&item=brand'; làm cho trang làm mới.

Sử dụng window.location.hash = "&item=brand"; nối thêm mà không làm mới nhưng với hàm băm # giúp loại bỏ mức sử dụng/hiệu ứng của tham số. Tôi đã cố gắng để loại bỏ băm sau khi phụ thêm nhưng điều đó không hoạt động.

---

This answer và nhiều người khác đề nghị việc sử dụng History HTML5 API, đặc biệt là phương pháp history.pushState, và cho các trình duyệt cũ là để thiết lập một định danh đoạn để ngăn chặn trang từ tải lại. Nhưng bằng cách nào?

---

Giả sử URL là: http://example.com/search.php?lang=en

Làm thế nào tôi có thể thêm &item=brand sử dụng phương pháp HTML5 pushState hoặc một định danh đoạn do đó sản lượng sẽ là như thế này: http://example.com/search.php?lang=en&item=brand mà không cần phải refresh lại trang?

---

Tôi hy vọng ai đó có thể ném một số ánh sáng về cách sử dụng HTML5 pushState để nối thông số vào URL hiện tại/hiện tại. Hoặc cách khác để đặt định danh phân đoạn cho cùng một mục đích. Một hướng dẫn hay, bản demo hay đoạn mã với một chút giải thích sẽ rất tuyệt.

Demo về những gì tôi đã làm cho đến thời điểm này. Câu trả lời của bạn sẽ được đánh giá cao.

Answer 1

Bạn có thể sử dụng pushState hoặc replaceState phương pháp, tức là .:

window.history.pushState("object or string", "Title", "new url"); 

HOẶC

window.history.replaceState(null, null, "/another-new-url");