Question

我正在使用bootstrap向导来获取学生的信息。此表单（向导）长度为12步，每个步骤平均有8个字段。填写表格（向导）大约需要20分钟。

现在出现问题：

用户正在将数据添加到字段中，然后单击下一步按钮继续下一步。他几乎是在第8步，第9步或第10步，由于错误或任何其他原因（如连接，慢速网络等），他被迫刷新页面，向导在第一步再次启动。这很烦人。现在我希望页面刷新以保留用户所在的步骤。如何做到这一点？

还请建议，如果有另一个选项可以使用而不是使用bootstrap向导来执行此操作。

Answer 1

您应该使用浏览器本地存储来保存最后一步和输入的数据。在页面加载时，您可以读取存储并恢复向导状态。如果向导完成，请删除存储。见http://www.w3schools.com/html/html5_webstorage.asp

注意：名称/值对始终存储为字符串。请记住在需要时将它们转换为其他格式！

因此，您可以创建一个以JSON格式保存对象的函数和另一个用于检索它的函数。

saveObjLocalStorage = function (key, obj) {
    if (window && window.localStorage) {
        try {
            window.localStorage.setItem(key, JSON.stringify(obj));
        } catch (ignore) {
        }
    }
};

getLocalStorageObj = function (key, defaultObj) {
    if (window && window.localStorage) {
        try {
            var storedFields = window.localStorage.getItem(key),
                obj;
            if (storedFields) {
                obj = JSON.parse(storedFields);
                return obj;
            }
        } catch (ignore) {
        }
    }
    return defaultObj;
};

对于您的具体情况，我认为您必须使用向导插件的事件，评估条目并将对象传递给函数。对象可能是这样的（取决于你）：

{
  currentStep: 'tab1',
  entriesTab0: {
    lastname: 'Doe',
    firstname: 'John',
    likeJavaScript: true
  },
  entriesTab1: {}
}

示例：

// store the entries in this object
var entries = getLocalStorageObj('myWizard', {
  currentStep: 0,
  entriesTab0: {},
  entriesTab1: {}
});
$('#rootwizard').bootstrapWizard({
  onTabShow: function(tab, navigation, index) {
    entries.currentStep = index;      
  },
  onNext: function(tab, navigation, index) {
    // I think index is the index of the next step.
    // On index === 1 evaluate entries on tab 0.
    if (index === 1) {
      entries.entriesTab0.lastname = $('#lastname').val();
      // evaluate other fields of tab 0
    } else if (index === 2) {
      // evaluate other fields of tab 1
    }
    saveObjLocalStorage('myWizard', entries);
  }
});
$('#lastname').val(entries.entriesTab0.lastname);
// init other fields
$('#rootwizard').find('li:eq(' + entries.currentStep + ') a').tab('show');

正如Sean F所说，您也可以使用window.sessionStorage代替。存储将不会持久存在，并将在用户关闭特定浏览器选项卡时删除。

注意：我从不使用向导，也不测试此代码。但它可以帮助你找到正确的方法（我希望）。

Answer 2

我解决了这个问题：

我切换到另一个具有存储状态功能的组件。它的“jQuery-Steps”（https://github.com/rstaib/jquery-steps）。在这个组件中有一个内置行为“saveState”，它将当前步骤存储到cookie中。因此，即使页面刷新，该步骤也会保留。

对于具有许多步骤和许多字段的表单，这是一个非常有用的功能。

如何在页面刷新时保留引导向导步骤

2 个答案: