Vue.Js, Nuxt.js 多步驟表單 - 如何在頁面重新加載時保存數據

Question

我有一個 3 步表格，現在我為每個步驟使用 3 個不同的頁面。 每個步驟都需要向后端提交以進行一些驗證和計算，然后將其發送到下一步。

問題是，假設一個用戶填寫了第一步，go 到了第二步，如果他在第二步重新加載頁面，第一步的數據將從 Vuex 存儲中刪除，而在最后一步當他提交表單他會得到一個錯誤，因為第一步的數據在 Vuex 商店中不再可用。 如果他在任何一步按下后退按鈕，上一步的表格將被清除，數據將不存在。

我可以使用 localStorage 並保存每個步驟的數據，但是這種方法的問題是某些數據是敏感的，我不想將敏感數據存儲在 localStorage 上。 這種方法的第二個問題是數據將始終在表單中，如果用戶關閉瀏覽器或類似的東西，數據將不會被清除。

解決此問題的好方法是什么？

Answer 1

作為 localStorage 的替代品，可以使用 session 存儲。

每當在瀏覽器的特定選項卡中加載文檔時，都會創建一個唯一頁面 session 並將其分配給該特定選項卡。 該頁面 session 僅對該特定選項卡有效。

• 只要選項卡或瀏覽器打開，頁面 session 就會持續存在，並且在頁面重新加載和恢復后仍然存在。

• Opening a page in a new tab or window creates a new session with the value of the top-level browsing context, which differs from how session cookies work.

• 使用相同的 URL 打開多個選項卡/窗口會為每個選項卡/窗口創建 sessionStorage。

• 復制選項卡會將選項卡的 sessionStorage 復制到新選項卡中。 關閉選項卡/窗口結束 session 並清除對象
  會話存儲。

取自 https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage