javascript - 如何在页面刷新时保留 Bootstrap 向导步骤

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。存储不会持久，并且会在用户关闭特定浏览器选项卡时被删除。

注意:我从不使用向导，也不测试这段代码。但它可以帮助您找到正确的方法(我希望)。