使用HTML5本地存儲來存儲多種選擇從下拉列表中

Question

我有一個引導的多選下拉菜單，看起來像這樣：

<div class="dropdown" style="margin-left: 10px;"> 
      <select id="showops" class="ShowHide" multiple="multiple"> 
       <option value="1"> Show Grid  </option> 
       <option value="2"> Show eMail  </option> 
       <option value="3"> Show Lat/Lon </option> 
       <option value="4"> Show Last Name </option> 
       <option value="5"> Show TOD  </option> 
       <option value="6"> Show CREDS  </option> 
       <option value="7"> Show County, St., Dist. </option> 
      </select> 
</div> 

每個值代表默認爲隱藏，但可以在MySQL中顯示的列/添加新行時正在編輯和刷新的HTML表。

但是，在添加每個新行之後，表刷新並且已經選擇的列被設置回它們的默認隱藏狀態。

在我看來，HTML5本地存儲技術可能能夠保留表刷新之間的選定列。我只是不確定如何存儲選定的值，然後在刷新後再次應用它們。

$('.ShowHide').change(function() { 
    localStorage.setItem(this.id, this.value); 
}).val(function() { 
    return localStorage.getItem(this.id) 
}); 

上面的代碼只存儲一個項目，所以我想我需要將它們存儲爲一個數組，但嘗試，因爲我可能我沒有到達那裏。我不太擅長陣列，所以我希望有人能幫我解決這個問題。

新東西：我沒有解釋得很好，所以放開視覺。 在上面的屏幕截圖中，列縣，州和地區通常不會顯示。他們從'顯示/隱藏'下拉列表中選擇。當新記錄動態添加到此表（jQuery）時，表刷新時不刷新整個頁面。發生這種情況時，這三列再次被隱藏起來。我想阻止這一點。

Answer 1

你需要一個

.each(function(){ here your paste all of your code}); 

例如這裏：https://codepen.io/anon/pen/RLbQaN?editors=1111

Answer 2

沒有那麼複雜，只需要join和split值/從localStorage：

$('.remember-selection').each(function(r) { 
 
    var thisSelection = $(this); 
 
    var thisId = thisSelection.attr('id'); 
 
    var storageId = 'remember-selection-' + thisId; 
 
    var storedInfo = localStorage.getItem(storageId); 
 
    if(storedInfo) { 
 
    \t var rememberedOptions = storedInfo.split(','); 
 
     thisSelection.val(rememberedOptions); 
 
    }; 
 
    thisSelection.on('change', function(e) { 
 
     var selectedOptions = []; 
 
     thisSelection.find(':selected').each(function(i) { 
 
      var thisOption = $(this); 
 
      selectedOptions.push(thisOption.val()); 
 
     }); 
 
     localStorage.setItem(storageId, selectedOptions.join(',')); 
 
    }); 
 
});

#showops { 
 
    height: 200px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="showops" class="ShowHide remember-selection" multiple="multiple"> 
 
    <option value="1">Show Grid</option> 
 
    <option value="2">Show eMail</option> 
 
    <option value="3">Show Lat/Lon</option> 
 
    <option value="4">Show Last Name</option> 
 
    <option value="5">Show TOD</option> 
 
    <option value="6">Show CREDS</option> 
 
    <option value="7">Show County, St., Dist.</option> 
 
</select>

它工作得很好JSFiddle。

這段代碼可以處理很多頁面上的選擇，只要確保每個頁面都使用唯一的ID即可。