Question

我有以下代码：

var LWTable = {
  '6': [200, 200, 220],
  '8': [220, 220, 240],
  '10': [240, 240, 260],
  '12': [260, 260, 290],
  '15': [290, 310, 340],
  '18': [330, 360, 400],
  '21': [385, 420, 460],
}

var plengthOptions = '';
Object.keys(LWTable).forEach(function(key) {
  plengthOptions += '<option value="' + key + '">' + key + ' in.</option>';
});

$('#plength').append(plengthOptions).change(function() {
  var pwidthOptions = '';
  LWTable[this.value].forEach(function(width, i) {
    pwidthOptions += '<option value="Width' + (i + 1) + '">Width' + (i + 1) + ' (' + width + ')</option>';
  });
  $('#pwidth').html(pwidthOptions);
}).change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="plength" id="plength"></select>
<select name="pwidth" id="pwidth"></select>

以上效果很好（另请参阅jQuery Replace value in select depending on other select box）并且位于$（文档）.ready（function（）但是..每当我重新加载页面时，我选择的任何内容都不再存在..它会重置为默认值，这不是我想要的。我怎么能拥有它＆＃34;记住＆＃34;价值？我假设我需要使用localStorage.getItem和localStorage.setItem，但是，我不知道如何。我尝试了一些事情，导致整个事情不再起作用了..

我如何/在哪里执行getItem（获取正确的值）以及我在哪里执行setItem，所以它在值更改时设置它？

Answer 1

我在我的所有项目中使用以下内容，所以我所要做的就是将data-local-key="some-key"添加到我想要的任何元素中，并记住＆＃34;它的价值。（别忘了将some-key改为每个元素的有意义的东西，并且要与众不同，这样它们就不会在路上重叠。

See working jsFiddle

＆＃13;

  $(document).on('blur','[data-local-key]',function(){
    var $this=$(this);
    if (window.localStorage) {
      window.localStorage.setItem($this.data('local-key'), $this.val());
    }
  });
  $('[data-local-key]').each(function(){
    var $this=$(this);
    $this.val(window.localStorage.getItem($this.data('local-key')));
  });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="" data-local-key="some-key" id="">
  <option value="a">a</option>
  <option value="b">b</option>
  <option value="c">c</option>
</select>

＆＃13;

请注意，我没有使用复选框，不确定它是否可行，但我很少使用复选框，所以它不是问题。

Answer 2

您可以在构建选项时致电getItem()，并在选择setItem()事件中change来存储新值。

你的代码对我来说有点直接编辑它，但这是一个基本的例子。

$(document).ready(() => {
    const lastValue = localStorage.getValue('lastValue');
    const values = [1,2,3,4,5];

    const $select = $('<select>');
    values.forEach(value => $select.append(`
        <option value="${value}">${value}</option>
    `);
    $select.val(lastValue);

    $select.change(() => { 
        localStorage.setValue('lastValue', $select.val());
    });
});

在您的特定情况下，您将看到两个图层，一个用于#plength，另一个用于#pwidth，但这个想法仍然相同：设置值您的select至localStorage.getItem('key')以及更改通话localStorage.setItem('key', $yourSelect.val())以存储该值。

如果您需要更多帮助，可以尝试使用更新的代码，然后使用更新的代码开始一个新问题。

jQuery记住动态生成的selectbox

2 个答案:

See working jsFiddle