无法从sessionStorage存储的innerHTML字符串中提取ID的问题

开发者阿泽

2026-6-19

问题原因及解决方法

错误原因

sessionStorage.getItem() 返回的是字符串类型，并非DOM对象，字符串本身不存在 getElementById() 方法，直接调用自然会报错。你存储的是HTML结构的字符串，必须先将其转换为可操作的DOM节点，才能进行元素查找。

解决方法

方法一：使用临时DOM容器（推荐）

创建一个临时div元素，把存储的HTML字符串赋值给它的innerHTML，再从这个div里查找目标元素：

var mySession = sessionStorage.getItem("catProfile");
// 创建临时容器
const tempContainer = document.createElement('div');
// 将HTML字符串注入临时容器
tempContainer.innerHTML = mySession;
// 从容器中查找目标元素
var myValue = tempContainer.getElementById("catAge");

// 正常获取元素内容示例
console.log(myValue.textContent); // 输出 "3 años"

方法二：正则表达式提取（不推荐，仅作补充）

如果仅需提取catAge的文本内容，且HTML结构长期稳定，可以用正则匹配，但这种方法容错性极差，HTML结构稍有变动就会失效：

var mySession = sessionStorage.getItem("catProfile");
const regex = /<p id="catAge" class="age">(.*?)<\/p>/;
const match = mySession.match(regex);
if (match) {
  console.log(match[1]); // 输出 "3 años"
}