如何防止多文檔表單頁面重新加載？

Question

我正在開發一個 web 應用程序，該應用程序將用戶通過多個 forms 與“返回”按鈕、表單、“保存”按鈕和“下一步”按鈕的簡單界面。 單擊“保存”僅計算給定答案的數字並將其發送到 localStorage。 當我然后單擊“下一步”時，它會打開我准備的下一個 html 文件，以相同的方式構建，只是形式不同。 問題是，如果我按“返回”，第一頁上的表單是空的，但是當我使用瀏覽器的“返回”按鈕時，它就在那里。 如何使用“返回”和“下一步”按鈕獲得此結果？ 我希望用戶能夠瀏覽他們的答案，並且如果他們在不同的路徑上遇到某個表單，則可以看到它已經完成（根據用戶的需要，創建的 11 個 forms 中的 3 到 5 個有各種路徑計算）。

我知道每次單擊“a href”時它都會打開 html 文件，但我不知道如何更改它。 我嘗試搜索 html 表單重新加載預防等，但它似乎沒有產生任何答案。 我不確定我是否知道如何以足夠簡單的方式來表述我的問題。

Answer 1

最好的簡單解決方案幾乎就是“Manolo”所建議的。

1. 將您需要的所有 forms 放入一個 HTML 文檔中
2. 將所有表單的樣式設置為“顯示：無”，除了第一個
3. 創建一個簡單的 JS function 相應地更改“顯示”樣式並將其與“onclick”屬性附加到您的按鈕。

抱歉缺少代碼。 在手機上輸入了這個，希望它足夠直截了當。 希望這有幫助。

Answer 2

您可以使用DOM 的 History_API來操作歷史記錄

let stateObj = { foo: "bar" }
history.pushState(stateObj, "page 2", "bar.html")

並且可以使用WindowEventHandlers捕獲導航器的后退和下一個按鈕的事件

Answer 3

根據需要加載 forms，使用 javascript 將它們請求到您的服務器。 使用獲取 api。

其他解決方案是將所有 forms 添加到一頁並將它們全部隱藏在用戶面前。 當用戶單擊下一步時，您將隱藏 firstForm 並顯示 secondForm。