多页面重复点击时localStorage值被提前删除的问题求助

问题原因 #

localStorage是同源页面共享的存储空间，多次点击打开新页面时会出现以下冲突：

1. 第二次点击会直接覆盖localStorage中的searchTag值
2. 第一个页面的AJAX请求完成后，会清空searchTag
3. 第二个页面加载时，要么拿到被覆盖后的值，要么拿到已被清空的空值，导致业务异常

最优解决方案：用URL参数传递值（完全避开localStorage共享问题） #

直接把标签值通过URL参数传给新页面，每个页面的参数独立，彻底解决共享冲突。

第一页代码修改

$(function(){ 
    $('.tag').on('click auxclick', function(e){
        // 阻止默认跳转，手动处理参数拼接
        e.preventDefault();
        const tag = $(this).text();
        const targetUrl = this.href;
        
        // 用URLSearchParams规范拼接参数
        const url = new URL(targetUrl);
        url.searchParams.set('searchTag', tag);
        
        // 根据点击类型打开页面（auxclick对应右键新标签/中键点击）
        if(e.type === 'auxclick') {
            window.open(url.toString());
        } else {
            window.location.href = url.toString();
        }
    });
});

第二页代码修改

$(document).ready(function(){
    // 从URL参数中获取标签值
    const urlParams = new URLSearchParams(window.location.search);
    const storedTag = urlParams.get('searchTag');

    if(storedTag) {
        // 填充搜索框
        document.getElementById("search-bar").value = storedTag;
        
        // 发送AJAX请求
        $.ajax({
            type: "post",
            url: 'Php/display-recipe-list.php',
            data: {"search-bar": storedTag},
            success: function(response){
                // 修正原代码选择器缺失的#（假设是ID选择器）
                $("#recipe-list").html(response);
                switchTypes();
                // 无需清空localStorage，因为根本没用到
            }
        });
    }
});

备选方案：保留localStorage但用唯一标识隔离数据 #

如果必须依赖localStorage，可以给每个页面实例生成唯一ID，通过URL传递ID读取对应数据，避免互相覆盖。

第一页代码修改

$(function(){ 
    $('.tag').on('click auxclick', function(e){
        e.preventDefault();
        const tag = $(this).text();
        const targetUrl = this.href;
        
        // 生成唯一标识（时间戳+随机字符串）
        const uniqueId = `searchTag_${Date.now()}${Math.random().toString(36).slice(2, 9)}`;
        localStorage.setItem(uniqueId, tag);
        
        // 传递唯一ID到新页面
        const url = new URL(targetUrl);
        url.searchParams.set('tagId', uniqueId);
        
        if(e.type === 'auxclick') {
            window.open(url.toString());
        } else {
            window.location.href = url.toString();
        }
    });
});

第二页代码修改

$(document).ready(function(){
    const urlParams = new URLSearchParams(window.location.search);
    const tagId = urlParams.get('tagId');

    if(tagId) {
        const storedTag = localStorage.getItem(tagId);
        if(storedTag) {
            document.getElementById("search-bar").value = storedTag;
            
            $.ajax({
                type: "post",
                url: 'Php/display-recipe-list.php',
                data: {"search-bar": storedTag},
                success: function(response){
                    $("#recipe-list").html(response);
                    switchTypes();
                    // 用完删除对应键，清理存储
                    localStorage.removeItem(tagId);
                }
            });
        }
    }
});

临时修复方案（不推荐，仅作参考） #

如果暂时不想修改传递方式，可以在第二页加载时立即读取并删除localStorage的值，减少覆盖概率：

$(document).ready(function(){
    // 页面加载时立即读取并移除值
    const storedTag = localStorage.getItem("searchTag");
    localStorage.removeItem("searchTag");

    if(storedTag) {
        setTimeout(function(){
            document.getElementById("search-bar").value = storedTag;
            
            $.ajax({
                type: "post",
                url: 'Php/display-recipe-list.php',
                data: {"search-bar": storedTag},
                success: function(response){
                    $("#recipe-list").html(response);
                    switchTypes();
                }
            });
        }, 25);
    }
});

注意：这个方案无法解决快速连续点击导致的覆盖问题，仅适合低频率点击场景。

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