Web 應用程式如何可靠地防止未儲存的表單資料遺失？

防止未儲存的表單登出

許多 Web 應用程式都具有允許使用者輸入和編輯資料的表單。當使用者離開這些表單或關閉瀏覽器標籤時，防止意外資料遺失是一項重要的安全措施。本文透過對各種方法的詳細分析，探討了此問題的全面解決方案。

短暫且有缺陷的解決方案

嘗試處理 beforeunload 事件並傳回非空字串似乎可以解決這個問題。但是，當使用者提交表單時，此方法會失敗，這也會觸發卸載事件。為了緩解這種情況，可以引入一個標誌來指示正在提交表單。然而，這個解決方案仍然存在問題，因為它沒有考慮對表單所做的實際更改。

理想的解決方案：利用「髒」標誌

更全面的解決方案方法涉及使用「髒」標誌，該標誌僅在發生重大表單變更時觸發警報。此方法將 beforeunload 事件與 isDirty 函數結合起來，該函數會偵測是否有任何相關的表單值被更改。

確定「髒」狀態

實現isDirty 函數涉及幾個注意事項：

• jQuery：使用jQuery 的表單序列化可能會有限制，因為它僅適用於命名的非禁用元素。
• 事件：按鍵事件是有限的，可能無法擷取所有變更。
• 更改事件在偵測 JavaScript 引發的方面也有限制變更。

避免事件處理陷阱

• 按鍵事件：不要覆蓋複選框、單選按鈕、觸發滑鼠的更改、不相關的擊鍵或JavaScript 修改的值。
• 更改事件：也錯過了 JavaScript 修改
• 輸入事件：缺乏瀏覽器相容性，無法捕獲所有類型的變更。

簡化第三方函式庫

與其重新發明輪子，不如考慮使用現有的函式庫：

• jquery.dirty：偵測表單變更並提供簡單的設定選項。
• jQuery 的 Are You Sure？外掛：提供了更可自訂的方法，但可能有限

瀏覽器限制：

Firefox 4 不再支援卸載確認對話框中的自訂訊息。 Chrome 51 也刪除了此功能。考慮使用更通用的訊息。

以上是Web 應用程式如何可靠地防止未儲存的表單資料遺失？的詳細內容。更多資訊請關注PHP中文網其他相關文章！