如何修改代码实现页面刷新后保留下拉按钮选中项文本？

要解决页面刷新后下拉按钮文本重置的问题，只需要借助浏览器的localStorage存储选中的内容，页面加载时再读取并恢复即可。

修改后的完整代码：

// 页面加载完成后恢复上次选中的文本
$(document).ready(function() {
  const savedText = localStorage.getItem('dropdownSelectedText');
  if (savedText) {
    $('.btn-toggle').text(savedText);
  }
});

// 切换下拉菜单显示/隐藏
$(".btn-toggle").on("click", function() {
  $('.dropdown-menu').toggleClass('open');
});

// 点击下拉项时更新按钮文本并保存到本地存储
$(".dropdown-menu li").on("click", function() {
  const selectedText = $(this).text();
  $('.btn-toggle').text(selectedText);
  localStorage.setItem('dropdownSelectedText', selectedText);
  $('.dropdown-menu').removeClass('open');
});

关键说明 #

• 页面初始化阶段：通过localStorage.getItem读取之前保存的选中文本，如果存在就直接设置给按钮，保证刷新后显示上次选择的内容。
• 下拉项点击事件：在更新按钮文本的同时，用localStorage.setItem把选中的文本存入本地存储，数据会一直保留在浏览器中，直到主动清除或用户删除浏览器缓存。

内容的提问来源于stack exchange，提问作者X Daast