SessionStorage含尖括号内容解析丢失，求排查及修复方案

猜测正确性确认 #

你的猜测完全正确。使用innerHTML插入内容时，浏览器会将包含<、>的内容识别为HTML标签解析，而非普通文本展示。比如你存储的<h1>（实际对应<h1>）会被解析成HTML标题标签，不会显示原有的尖括号文本，最终导致内容丢失或显示异常。

修复方案 #

方案1：用textContent替代innerHTML #

如果仅需展示带尖括号的纯文本，无需渲染实际HTML，textContent是最简单的解决方案——它会把所有内容当作纯文本处理，不会解析HTML标签。

修改后的代码：

for (let i = 0; i < items.length; i++) {
    const element = items[i];
    const div = document.createElement('div');
    const newContainer = containerList.appendChild(div);
    newContainer.classList.add('questionContainer');
    
    // 创建问题元素并设置文本
    const questionDiv = document.createElement('div');
    questionDiv.classList.add('question');
    questionDiv.textContent = element.questions || element.question;
    div.appendChild(questionDiv);

    if (Object.keys(element).length == 2) {
        const answerDiv = document.createElement('div');
        answerDiv.classList.add('yourAnswer', 'right');
        answerDiv.textContent = element.answer;
        div.appendChild(answerDiv);
    } else {
        const yourAnswerDiv = document.createElement('div');
        yourAnswerDiv.classList.add('yourAnswer', 'wrong');
        yourAnswerDiv.textContent = element.yourAnswer;
        div.appendChild(yourAnswerDiv);

        const correctAnswerDiv = document.createElement('div');
        correctAnswerDiv.classList.add('correctAnswer');
        correctAnswerDiv.textContent = element.correctAnswer;
        div.appendChild(correctAnswerDiv);
    }
}

方案2：转义HTML特殊字符后使用innerHTML #

如果需要混合渲染合法HTML和显示尖括号文本，需先将文本中的特殊字符转义（如<转成<，>转成>），再插入到innerHTML中。

先定义转义函数：

function escapeHtml(text) {
    return text
        .replace(/&/g, '&')
        .replace(/</g, '&lt;')
        .replace(/>/g, '&gt;')
        .replace(/"/g, '&quot;')
        .replace(/'/g, '&#039;');
}

再修改原代码：

for (let i = 0; i < items.length; i++) {
    const element = items[i];
    const div = document.createElement('div');
    const newContainer = containerList.appendChild(div);
    newContainer.classList.add('questionContainer');
    if (Object.keys(element).length == 2) {
        div.innerHTML = `
        <div class="question">${escapeHtml(element.questions)}</div>
        <div class="yourAnswer right">${escapeHtml(element.answer)}</div>
        `
    } else {
        div.innerHTML = `
        <div class="question">${escapeHtml(element.question)}</div>
        <div class="yourAnswer wrong">${escapeHtml(element.yourAnswer)}</div>
        <div class="correctAnswer">${escapeHtml(element.correctAnswer)}</div>
        `        
    }
}

选择建议 #

• 仅需展示纯文本时优先选方案1，代码简洁且能避免XSS风险；
• 需要混合HTML渲染和尖括号文本显示时，再使用方案2。

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