javascript - 使用 HTML5 本地存储存储下拉列表中的多个选择

Question

我有一个 Bootstrap 多选下拉列表，如下所示:

<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

没那么复杂，只需要 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 ) {
    	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 即可。