導航到另一個頁面後，複選框狀態發生變化

Question

我試圖在用戶遍歷到我的rails網站上的另一個頁面後堅持複選框狀態。

當前，當我從索引頁導航到另一頁，並從索引頁返回到索引頁複選框時，請檢查。即使我導航到另一個頁面，我也希望它能保存我給出的值。

我已經寫

$(document).ready(function() { 

    //Fixing the Turbolinks issue in rails with 'ready page:load' 
    $(document).on('ready page:load', function() { 
function addingChecks() { 
    var filterStatusArr = []; 
    filterStatusArr = localStorage.filterStatus; 
    $('#filterText h4 .onoffswitch .onoffswitch-checkbox').each(function() { 
     for (var i = 0; i < filterStatusArr.length; ++i) { 
      if (filterStatusArr[i] == "true") { 
       $(this).prop('checked', true); 
      } else { 
       $(this).prop('checked', false); 
      } 
     } 
    }); 
}; 

rememberFilterState(); 
addingChecks(); 
function rememberFilterState() { 

    filterStatus = []; 
    $('#filterText h4 .onoffswitch .onoffswitch-checkbox').each(function() { 
     if ($(this).is(':checked')) { 
      filterStatus.push("true"); 
     } else { 
      filterStatus.push("false"); 
     } 
     localStorage.input = filterStatus; 
    }); 
    //alert(filterStatus); 
} 

行之有效的onload但是這忽略了當我去到另一個網頁，然後回來。

這是認可的行爲嗎？ 我該如何解決這個問題？

乾杯

Answer 1

你存儲的值到localStorage.input內rememberFilterState，但在addingChecks讓他們回來從localStorage.filterStatus，

注意，JSON格式的localStorage存儲，你必須使用JSON.stringify設置時，並且當獲得價值時

看看下面更優化的片段

function addingChecks() { 
    if(!localStorage.filterStatus) { 
     return; 
    } else { 
     var filterStatusArr = JSON.parse(localStorage.filterStatus); 
     $('#filterText h4 .onoffswitch .onoffswitch-checkbox').each(function(index){ 
      $(this).val(filterStatusArr[index]); 
     }); 
    } 
}; 

function rememberFilterState() { 
    var filterStatus = []; 
    $('#filterText h4 .onoffswitch .onoffswitch-checkbox').each(function() { 
     filterStatus.push($(this).val()); 
    }); 
    localStorage.filterStatus = JSON.stringify(filterStatus); 
} 

$(document).ready(addingChecks); 
$(window).unload(rememberFilterState);