Ajax được cập nhật giao diện người dùng và các nút Trở lại

Question

Kịch bản:

• Một trang được nạp với một giao diện người dùng phức tạp trên đó.
• Người dùng thực hiện một số hành động làm thay đổi dữ liệu thông qua cuộc gọi lại Ajax, thay đổi được phản ánh trên giao diện người dùng bằng thao tác DOM (ví dụ: thông qua jQuery).
• Người dùng nhấp vào liên kết để chuyển đến trang khác (nói trang chi tiết).
• Người dùng nhấp vào nút quay lại để quay lại trang giao diện người dùng ban đầu.
• Người dùng nhìn thấy thông tin lỗi thời - có vẻ như những thay đổi mà anh đã thực hiện (ở bước 2) không bao giờ xảy ra.

Bạn giải quyết tình huống này như thế nào?

Answer 1

Cookie. Cách duy nhất để lưu thông tin sau khi người dùng rời khỏi trang và quay lại là với cookie.

Cách tốt hơn để làm điều này là

0. user goes to your page 
1. A page is loaded with complex UI based on what is saved in the users cookies (default if no cookie) 
2. user does some actions, which are saved into the cookie 
3. user goes to another page 

Answer 2

Dù dữ liệu được truyền đến trang tiếp theo sẽ cũng cần phải được thông qua lại để thay đổi giao diện người dùng như cách nó cần phải được.

Điều này có thể được thực hiện bằng cookie hoặc có thể thực hiện bằng cách sử dụng logic dữ liệu bài đăng/phía máy chủ. Chỉ cần chuyển các giá trị cho trang thứ hai và khi người dùng muốn quay lại, hãy đảm bảo truyền lại chúng và thay đổi giao diện tùy thuộc vào các giá trị. Bạn thậm chí có thể sử dụng một phiên cho điều này là bạn muốn, nhưng tôi nghĩ rằng có thể là overkill nếu đây là nơi duy nhất bạn sẽ cần nó.

Metropolis

Answer 3

Bạn có thể buộc trang làm mới khi nhấn nút quay lại sau đó sẽ kéo dữ liệu được cập nhật từ máy chủ.

<META http-equiv="Cache-Control" content="no-cache"> 
<META http-equiv="Pragma" content="no-cache"> 
<META http-equiv="Expires" content="-1"> 

bạn cũng có thể muốn có một cái nhìn tại Real Simple History và xem nếu bạn có thể tận dụng các kỹ thuật của họ để sử dụng nút Back.

Answer 4

Cookie không phải là cách duy nhất. Hãy nghĩ về jQuery BBQ Plugin. Xem thêm http://mattfrear.com/2010/03/20/enabling-browser-back-button-on-cascading-dropdowns-with-jquery-bbq-plugin/

Về cơ bản, nó sử dụng #variables được thêm vào chuỗi truy vấn để đánh lừa trình duyệt nghĩ rằng đó là trang mới, vì vậy nếu bạn làm mới hoặc quay lại trang, biến # sẽ lặp lại các điều khiển.