javascript - 单击后退按钮时保留动态更改的选择值

Question

我有一个可以过滤不同汽车的表单，并且它运行完美。

当用户选择“制作”时，正确的同级“模型”将填充到下一个下拉列表中，依此类推。

问题是，一旦用户执行搜索，如果他们单击浏览器的后退按钮，动态填充的选择值将恢复为默认值!

我没有使用ajax来动态填充选择字段，而只是使用javascript来读取JSON文件并更新模型/系列/等。

我看过这篇文章:Preserve dynamically changed HTML on back button

我不明白这是如何工作的，我也听说过本地存储 - 对我来说最好的途径是什么？谢谢。

Answer 1

为此使用 localStorage 可能有点笨拙(我应该何时以及如何清除该值？)并且有 security related considerations这可能使它成为一个不可行的解决方案。

另一种选择是使用隐藏的文本框，它利用浏览器的默认行为。

当单击后退按钮后加载页面时，浏览器似乎会根据用户离开页面时其中包含的值填充文本框(即使该值已动态更改)。 请注意，这与处理隐藏输入的方式不同，后者会忽略动态更改，因此您必须使用文本框。

<select></select>
<input type="text" style="display:none" />

<script>
  // store the dropdown's value in a hidden textbox which is persisted and 
  // used to populate the dropdown when the back button is used to get here
  $('select').on('change', function() {
    $('input').val($(this).val());
  });

  // example showing dynamic population of dropdown
  $.ajax({
    url: 'api/get-dropdown-options',
    success: function(data) {
      // dynamically populate the dropdown
      $('select').html(data);

      // update the dropdown's value based on the persistent value
      // retained in the hidden textbox
      $('select').val($('input').val());
    }
  });
</script>