如何即使在頁面刷新時也保留引導向導步驟

Question

我正在使用引導向導從學生那里獲取信息。 這種形式（向導）長12步，平均每步8場。 完成表格（向導）大約需要20分鍾。

現在的問題是：

用戶正在將數據添加到字段中，然后單擊下一步按鈕繼續進行下一步。 他幾乎處於第8，第9或第10步，並且由於錯誤或由於任何其他原因（如連接性，網絡速度慢等）而被迫刷新頁面，向導再次從第一步開始。 真煩人 現在，我希望頁面刷新以保留用戶所在的步驟。 如何做到這一點？

如果沒有其他可以使用的引導向導，請提出建議。

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中。 因此，即使刷新頁面也保留該步驟。

對於具有許多步驟和許多字段的表單，這是非常有用的功能。