如何正确调用SessionStorage数据？调用时仅显示idno、fname未显示lname

看起来你遇到的问题是遍历SessionStorage时只能显示idno和fname，却看不到lname，结合你给出的代码片段，我帮你分析几个可能的原因和解决办法：

先确认数据是否真的存在于SessionStorage中 #

这是最基础的排查步骤，先搞清楚lname有没有被正确存进去：

• 打开浏览器开发者工具（按F12），切换到Application（Chrome）或Storage（Firefox）标签，找到左侧的Session Storage，查看里面的所有键值对，确认lname这个key存在，且对应的值正确。
• 注意：SessionStorage的key是大小写敏感的，如果存储时写的是Lname或者lastname，那遍历lname肯定找不到。

修复代码中的语法错误 #

你给出的代码片段里，HTML拼接部分明显不完整：

display_data.innerHTML +="<tr><td>"+a+"</td><td>"+b+"</td><td&...

这里的<td&...是未闭合的标签，会导致DOM渲染异常，后续内容（比如lname对应的行）可能被浏览器直接忽略。你需要补全正确的HTML标签，比如如果是两列数据，应该写成：

display_data.innerHTML += "<tr><td>" + a + "</td><td>" + b + "</td></tr>";

另外你代码里var c = sessionStorage.getItem(a);和b取的是同一个值，这完全没意义，大概率是你写错了逻辑。

检查存储数据的方式是否正确 #

这里分两种常见情况：

情况1：单个字段独立存储 #

如果你是像下面这样单独存储每个字段：

sessionStorage.setItem('idno', '1001');
sessionStorage.setItem('fname', 'Alice');
sessionStorage.setItem('lname', 'Smith');

那遍历SessionStorage的key逻辑是对的，但要确保：

• lname的key拼写完全正确（包括大小写）
• HTML拼接没有语法错误（前面已经提过）

情况2：存储整个对象的序列化字符串 #

如果你是把用户对象转成JSON字符串存储的（这是更常用的做法）：

const user = {idno: '1001', fname: 'Alice', lname: 'Smith'};
sessionStorage.setItem('user', JSON.stringify(user));

那你的遍历逻辑就错了！因为SessionStorage里只有一个user的key，遍历sessionStorage.length只能拿到这个key，而不是idno、fname、lname。这时候需要先解析JSON字符串成对象，再遍历对象的属性：

function display(){
  var display_data = document.getElementById('display_data');
  display_data.innerHTML = "";
  
  // 取出存储的用户对象并解析
  const userStr = sessionStorage.getItem('user');
  if (userStr) {
    const user = JSON.parse(userStr);
    // 遍历对象的每个属性
    for (const key in user) {
      if (user.hasOwnProperty(key)) {
        // 用模板字符串拼接HTML，可读性更高
        display_data.innerHTML += `<tr><td>${key}</td><td>${user[key]}</td></tr>`;
      }
    }
  }
}

小建议 #

用innerHTML拼接HTML时，推荐使用ES6的模板字符串（用反引号`包裹），这样不仅可读性更高，还能避免字符串拼接时的引号转义和语法错误。

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