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