javascript - 如何在网站中创建向导？

在一个网站中，我想实现一个wizard。它看起来应该像一系列表格。

我的要求是:

用户应该能够使用浏览器的前进和后退按钮，而不会提示您重新提交表单(来回时)。

如果用户在先前填充的页面上来回移动，则字段应为自动完成的

如果用户在未完成前面的步骤的情况下尝试访问页面，则应相应地重定向他(最后一个必需的页面)。

用户应该能够在离开并返回后继续完成表单。

在我的模型中，每个页面都需要填充上一页。每个页面都有自己的验证。

网址应该很漂亮。

该向导应在没有javascript的情况下工作(但不是必需的)。

您将如何实现？ (一系列HTTP发布表单，http获取表单，是否通过javascript提交？)

思路:

我计划将所有信息存储在 session 中，并在向导结束时将信息保存在数据库中并清除当前 session 信息。这样，我可以自动完成字段，并知道用户在向导的完成位置。

我主要关心的是:

如果我使用http posts表单实现，浏览器将提示重新提交每个表单(而且我不知道如何控制该表单)

如果我使用http GET表单实现它，则URL充满信息，并且可能会很长。这不是GET请求的手段。

如果我通过javascript的http帖子提交每个表单，则不会出现提示，但是我的向导无法使用javascript(也许一种解决方案是覆盖默认的表单行为，使其可以使用和不使用javascript)

最佳答案

我不建议将 session 用于任意数据存储!如果您最终使用 session 进行登录身份验证，那往往会很快变得困惑，并且还会破坏安全模型。将您的身份验证与设置数据分开，并创建一个专门用于设置的表，或者使用javascript localStorage!

在您的情况下，您所描述的内容对我来说就像是一个很长的表格，它具有显示/隐藏功能以及多个表格部分，并带有持久存储的怪癖!

换句话说，代替form1 > form2 > form3 > form4 > doneform_section_1 > validate, save data, and then display form_section_2 and hide form_section_1 > validate, save data, and then display form_section_3 and hide form_section_2 > etc > true form submit once
对于没有javascript的用户，只需在提交任何部分后验证所有部分中php中的信息。如果您确实希望甚至在边缘情况下也可以存储由session_id标识的信息，则可以将它们存储在设置表中。

为了简单起见，在这种情况下，我将使用localStorage在每次验证时存储所有数据，并使用javascript防止意外离开主表单。如果您真的必须通过支持例如ie7(http://caniuse.com/#search=localStorage)使您的生活复杂化，然后检测localStorage并在没有它的情况下将数据传递给php脚本，该脚本将其放入单个数据容器对象并将其全部转换为将单个json包保存在 session 中的单个变量中，或者甚至保存在数据库的设置表中。