Javascript 单击“后退”按钮时保留动态更改的选择值

我有一个表格可以过滤不同的汽车，它工作得很好

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

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

我没有使用ajax动态填充select字段，而是使用javascript读取JSON文件并更新models/series/etc之类的内容

我看过这篇文章：

---

我不明白这是怎么回事，我也听说过localstorage——我去旅行的最佳途径是什么？谢谢。

因为数据是动态加载的，所以当用户返回上一页时，浏览器将无法重新填充以前选择的条目

我建议您使用浏览器的本地存储来存储最新的选择，并在用户返回时检索它们。要实现这一点，只需为localStorage对象设置一个新变量，然后像这样检索它：

localStorage.make=“BMW”

警报（localStorage.make）

还有一个更有用的例子：

select = document.getElementById("make");

if (localStorage.make) {
    select.options[localStorage.make].selected = true;
}

为此使用localStorage可能有点笨拙（何时以及如何清除此值？），并且存在一些可能使其成为不可行的解决方案的问题

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

单击“上一步”按钮后加载页面时，浏览器会根据用户离开页面时包含的值填充文本框（即使该值已动态更改）。注意，这与处理隐藏输入的方式不同，隐藏输入忽略动态更改，因此必须使用文本框


//将下拉列表的值存储在一个隐藏的文本框中，该文本框将被持久化并保存
//当使用“后退”按钮到达此处时，用于填充下拉列表
$（'select'）。在（'change'，function（）上{
$（'input'）.val（$（this.val（））；
});
//显示下拉列表动态填充的示例
$.ajax({
url:“api/获取下拉选项”，
成功：功能（数据）{
//动态填充下拉列表
$（'select'）.html（数据）；
//基于持久值更新下拉列表的值
//保留在隐藏的文本框中
$（'select'）.val（$（'input'）.val（））；
}
});
为什么他们首先要返回？一些用户可能只是单击了“返回”按钮-我想像许多网站一样保留他们在选定字段中输入的数据。您可以通过本地存储、cookie或通过在服务器上的会话（或DB）中存储搜索词来实现。有很多方法可以实现。关键的概念是保护国家。web本质上是无状态的——默认情况下，它不记得以前的请求。在不同的场景中，这既是祝福也是诅咒。啊哈！我认为这终于开始有意义了，我理解了localStorage——这对我来说很有用。我已设法将当前值保存在localstorage中，单击“上一步”按钮时会显示该值。现在我想我将尝试在所有select值上运行foreach循环，并将其添加到localstorage。谢谢你的回答！没问题。您还可以通过直接获取下拉列表的选定值来避免循环所有值，如：
select.options[select.selectedIndex].text
，如果这回答了您的问题，请确保将我的答案标记为正确答案：）啊，我明白了，实际上，我只是抓取了select中的所有HTML，并将其放入localstorage中。直到2分钟前，一切都很正常-我添加了localStorage.clear（）；-然后删除了这个，现在localStorage突然不工作了。我将不得不谷歌这个，奇怪的笑。非常感谢你的回答，真的帮助了我！谢谢你的回复！我的问题是将它包装在if（localStorage.make）{}-奇怪中，因为在清除localStorage之前，这不是一个问题。不过现在一切都很好，你的例子帮了我很多-祝福你，我希望你今年赚很多钱！干杯！：）这是一个很好的提示。我发现localStorage/sessionStorage没有帮助，因为如果您多次单击“后退”按钮，您将看到相应的文本框填充，这意味着实现您自己的树导航器。文本框很有帮助，但是：不幸的是，它们必须被隐藏才能使此行为正常工作。因此，对于每个可见的文本框，我必须维护一个隐藏的文本框来存储数据，然后从hidden OnBodyLoad（）填充可见的文本框。有人知道更好的方法吗？我一定不理解你的场景，因为如果你想要为其保留值的控件已经是（可见的）文本框，我看不出额外的隐藏文本框将如何帮助你。注意：我的答案是针对这样一种情况，即您保留
select
元素的选定状态，并且可能不是与其他控件一起使用的最佳选择。我发现，可见文本框不会在后退按钮上保留其值（Chrome 83）。但是，我想我可以使用window.location（url）来检索旧值-在背面按钮上正确地更改了旧值。应用程序中的某些内容必须清除这些值。自很久以前以来的默认浏览器行为将保留该值。在文本框中键入内容，导航到别处，然后单击后退按钮。
<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>