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

Question

我正在使用引導向導從學生處獲取信息。這種形式（嚮導）是12步長，平均每步8個字段。完成表格（嚮導）大約需要20分鐘。

現在的問題：

的用戶被添加到數據中的字段和移動到下一步驟點擊下一個按鈕。他幾乎處於第8,9或10步，並且由於錯誤或任何其他原因（如連接，網絡速度慢等）而被強制刷新頁面，嚮導將在第一步重新開始。這很煩人。現在我想刷新頁面以保留用戶所在的步驟。如何做到這一點？

另請建議，如果有另一個選項，而不是使用引導向導，可以做到這一點。

Answer 1

我解決了這個問題：

我切換到另一個組件具有存儲狀態的功能。它的「jQuery-Steps」（https://github.com/rstaib/jquery-steps）。在這個組件中有一個內置的行爲「saveState」，它將當前步驟存儲到cookie中。所以即使在頁面刷新時，該步驟仍然保留。

這是一個非常有用的功能，有很多步驟和許多領域的形式。

Answer 2

您應該使用瀏覽器本地存儲來保存最後一步和輸入的數據。在頁面加載時，您可以讀取存儲並恢復嚮導狀態。 如果嚮導完成，請刪除存儲。 請參閱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代替。存儲將不會持久，並且在用戶關閉特定瀏覽器選項卡時將被刪除。

注：我從來不使用嚮導，也不測試此代碼。但它可以幫助您找到正確的方式（我希望）。