如何在HTML中从LocalStorage初始化完整div，避免转义字符破坏

问题根源 #

• 渲染时直接将localStorage.getItem('favorites')的原始字符串赋值给element.textContent，会把JSON数组的转义字符（如\n、"）和数组格式（括号、逗号）原样显示，而非解析为正常HTML。
• 未先解析LocalStorage中存储的JSON数组，直接使用原始字符串导致布局混乱。

修复方案 #

1. 正确渲染收藏卡片 #

先解析LocalStorage中的JSON数组，遍历每个HTML字符串，通过innerHTML插入到容器中：

// 获取渲染容器
const output = document.getElementById("mini__cards");
// 解析存储的收藏数据，为空则默认空数组
const favorites = JSON.parse(localStorage.getItem('favorites')) || [];

// 清空容器（避免重复渲染旧内容）
output.innerHTML = '';

// 遍历每个收藏卡片的HTML字符串，渲染到页面
favorites.forEach(cardHtml => {
    const cardContainer = document.createElement('div');
    cardContainer.innerHTML = cardHtml;
    output.appendChild(cardContainer);
});

2. 优化存储逻辑（可选：避免重复添加） #

如果需要防止用户重复添加同一张卡片，可以在存储前通过卡片ID判断是否已存在：

const source = favdiv.outerHTML;
let favorites = JSON.parse(localStorage.getItem('favorites')) || [];

// 获取卡片的唯一ID（示例中用卡片内的id属性）
const cardUniqueId = favdiv.querySelector('[id]').id;
// 检查当前卡片是否已在收藏列表中
const isDuplicate = favorites.some(card => card.includes(`id="${cardUniqueId}"`));

if (!isDuplicate) {
    favorites.push(source);
    localStorage.setItem('favorites', JSON.stringify(favorites));
}

关于你之前尝试innerHTML无效的原因 #

你可能错误地直接将整个JSON数组字符串赋值给innerHTML（比如output.innerHTML = localStorage.getItem('favorites')），这样会把["<div...>", "<div...>"]这类数组格式的字符串当作HTML解析，自然会出现转义字符和格式混乱。必须先解析数组，再逐个处理每个HTML片段。

内容的提问来源于stack exchange，提问作者Igor Gabriel Monteiro