如何实现点击时设置每页条目数、处理URL参数及选中选项状态

看起来你已经搭好了基础功能框架，但遇到了参数重复和刷新后选中状态丢失的小问题，我来帮你一步步搞定：

问题1：替换已存在的URL参数，避免重复 #

你之前用字符串截取的方式处理参数，这种方式很容易踩坑——比如参数在URL开头、或者后面还跟着其他参数的情况，都会导致处理失败。推荐用原生的URLSearchParams API来处理，它能更可靠地帮我们添加、修改或删除URL参数。

修改你的js_sort函数如下：

function js_sort(forms, type) {
  if (type == 1) {
    // 解析当前完整URL
    const currentUrl = new URL(window.location.href);
    // 获取用户选中的条目数
    const selectedSize = forms.value;
    // 替换/新增itemSize参数（如果你的后端用的是rows，把这里换成rows就行）
    currentUrl.searchParams.set('itemSize', selectedSize);
    // 跳转到处理后的新URL，自动解决参数重复问题
    window.location.href = currentUrl.toString();
  }
}

这个方法会自动检测URL里是否存在itemSize参数：有就直接替换值，没有就新增，完美解决重复参数的问题。

问题2：页面刷新后保持选中状态 #

因为页面会刷新，我们可以在页面加载时，从URL的itemSize参数里读取用户之前的选择，然后自动设置对应的选项为选中状态。

添加一个页面加载时执行的函数：

window.addEventListener('load', function() {
  const currentUrl = new URL(window.location.href);
  // 从URL里取出已选中的条目数
  const savedSize = currentUrl.searchParams.get('itemSize');
  const selectBox = document.querySelector('select[name="pagesize"]');
  
  // 如果URL里有参数，就选中对应选项；没有的话默认选30
  if (savedSize) {
    selectBox.value = savedSize;
  } else {
    selectBox.value = '30';
  }
});

同时要修正你的HTML代码——不要给所有option都加selected属性，这会导致默认选中多个选项，只需要让JS来控制选中状态即可：

<div class="dropdown">
  <select name="pagesize" onchange="js_sort(this,1)">
    <option value="30">30 Items Per Page</option>
    <option value="60">60 Items Per Page</option>
    <option value="90">90 Items Per Page</option>
    <option value="120">120 Items Per Page</option>
  </select>
</div>

这样页面刷新后，就会自动根据URL参数选中用户之前选过的选项，体验就正常了。

额外小提示 #

URLSearchParams是现代浏览器都支持的API，兼容性拉满，不需要担心旧浏览器的问题。如果你的后端接口用的是rows而不是itemSize，只需要把代码里的itemSize替换成rows就行，保持和后端参数名一致就好。

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