点击下拉列表项获取的rel值跳转页面后重置问题求解

因为index.html和index2.html属于两个独立的浏览器上下文，各自的JavaScript变量完全隔离，所以index.html里更新的val无法直接传递到新页面。可以通过以下两种方式解决：

方法1：通过URL查询参数传递值 #

修改index.html中的点击事件，动态给跳转URL添加参数：

$(".category").click(function(e) {
    e.preventDefault(); // 阻止a标签的默认跳转行为
    const relVal = $(this).attr('rel');
    const originalHref = $(this).find('.dropdown-item').attr('href');
    // 拼接带参数的新URL
    const separator = originalHref.includes('?') ? '&' : '?';
    const newHref = `${originalHref}${separator}rel=${relVal}`;
    // 打开新页面
    window.open(newHref, '_blank');
});

在index2.html中读取URL参数：

const urlParams = new URLSearchParams(window.location.search);
const val = urlParams.get('rel') || 1; // 无参数时默认取初始值1

方法2：使用本地存储存储值 #

修改index.html的点击事件，把选中的rel值存入本地存储：

$(".category").click(function() {
    const relVal = $(this).attr('rel');
    localStorage.setItem('selectedRel', relVal);
});

在index2.html中读取存储的值：

const val = localStorage.getItem('selectedRel') || 1;
// 可选：如果不需要长期保留该值，读取后可清除
// localStorage.removeItem('selectedRel');

补充：如果只需要在当前浏览器会话期间保留数据，可替换为sessionStorage，关闭页面后数据会自动清除。

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