sessionStorage取值返回null问题：点击按钮删除数据异常排查

嘿，我帮你梳理了下问题，控制台提示thing为null，同时删除逻辑没正常工作，主要是这几个地方出了问题：

1. DOM选择器写法错误，ID值获取不对 #

你写的$(this > "span")是无效的选择器语法，根本拿不到按钮旁边的<span>元素。而且就算选到了，span里的文本是ID : 4224762，你直接拿这个完整字符串去和sessionStorage里的thing.id（数字类型）比较，肯定匹配不上，这就导致循环一直在瞎转，甚至遇到非JSON格式的存储项时，解析就会返回null，触发报错。

2. 没处理JSON解析失败的情况 #

sessionStorage里的存储项不一定都是有效的JSON，直接硬解析的话，遇到无效内容就会返回null，控制台自然会报错。

修正后的完整代码 #

$(".btn-alert").click(function(){
    // 第一步：正确获取并提取纯ID值
    const spanElement = $(this).siblings("span"); // 拿到按钮同级的span
    const fullIdText = spanElement.text().trim();
    // 提取出数字部分，去掉"ID : "前缀
    const targetIdStr = fullIdText.replace(/ID : /, '');
    const targetId = parseInt(targetIdStr, 10); // 转成数字，和sessionStorage里的id类型匹配

    // 第二步：遍历sessionStorage，安全解析并删除匹配项
    for(let prop in sessionStorage){
        try {
            const storedItem = sessionStorage.getItem(prop);
            if(!storedItem) continue; // 跳过空项
            const thing = JSON.parse(storedItem);
            // 确保thing存在且id匹配
            if(thing && thing.id === targetId){
                sessionStorage.removeItem(prop);
                break; // 找到匹配项就跳出循环，不用浪费性能继续遍历
            }
        } catch(err) {
            console.warn(`解析sessionStorage中键为${prop}的项失败：`, err);
            continue; // 解析失败就跳过，不影响后续逻辑
        }
    }

    // 删除对应的.voyages容器
    $(this).closest(".voyages").remove();

    // 检查sessionStorage是否为空，跳转页面
    if(sessionStorage.length === 0){
        alert("Message!");
        location.href = "reservation.html";
    }
});

几个关键的修复点 #

• 修正DOM选择：用.siblings("span")（或者如果span是按钮的直接下一个元素，用.next("span")）正确获取到目标span，再通过字符串处理提取出纯ID数字，保证和sessionStorage里的id类型一致。
• 增加解析容错：用try-catch包裹JSON解析逻辑，避免单个无效存储项导致整个删除逻辑崩溃，同时打印警告日志方便排查。
• 优化循环效率：找到匹配的存储项后直接跳出循环，不用遍历全部sessionStorage内容。

你可以在调试的时候，先在控制台打印targetId的值，确认是不是正确提取到了航班ID，这样能更快验证匹配逻辑是否正常。

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