如何将多维数组/对象存入textarea实现轻量化页面加载？

问题分析 #

直接存储完整HTML会导致体积膨胀且维护性差，改用JSON存储核心数据是合理优化方向，失败原因大概率是数据提取/序列化/渲染的逻辑衔接问题，比如JSON转义处理不当、数据结构与HTML结构不匹配、修改后的数据提取逻辑错误。

实现步骤&代码示例 #

假设你的固定HTML结构类似卡片列表（可根据实际结构调整）：

<div class="item">
  <h3 class="title">标题</h3>
  <p class="content">内容</p>
</div>

1. 定义核心数据结构

用数组存储每个元素的核心字段：

// 示例数据结构，可根据实际需求扩展字段
const defaultData = [
  { title: "默认标题1", content: "默认内容1" },
  { title: "默认标题2", content: "默认内容2" }
];

2. 页面加载：从textarea读取JSON并渲染HTML

function renderFromData(data) {
  const output = document.getElementById('output');
  output.innerHTML = '';
  // 遍历数据生成对应HTML结构
  data.forEach(item => {
    const itemEl = document.createElement('div');
    itemEl.className = 'item';
    itemEl.innerHTML = `
      <h3 class="title">${item.title}</h3>
      <p class="content">${item.content}</p>
    `;
    output.appendChild(itemEl);
  });
}

// 页面初始化逻辑
window.addEventListener('load', () => {
  const textarea = document.getElementById('your-textarea-id');
  let data;
  try {
    // 尝试解析textarea中的JSON内容
    data = JSON.parse(textarea.value.trim());
    // 验证数据结构合法性（可选）
    if (!Array.isArray(data)) throw new Error('数据格式错误');
  } catch (e) {
    // 解析失败时使用默认数据并同步到textarea
    data = defaultData;
    textarea.value = JSON.stringify(data, null, 2);
  }
  renderFromData(data);
});

3. 监听内容修改，提取核心数据存回textarea

function extractDataFromDOM() {
  const output = document.getElementById('output');
  const items = output.querySelectorAll('.item');
  const data = [];
  // 从DOM中提取核心字段，选择器需和渲染结构完全对应
  items.forEach(item => {
    data.push({
      title: item.querySelector('.title').textContent.trim(),
      content: item.querySelector('.content').textContent.trim()
    });
  });
  return data;
}

// 示例：点击保存按钮时同步数据到textarea
document.getElementById('save-btn')?.addEventListener('click', () => {
  const data = extractDataFromDOM();
  const textarea = document.getElementById('your-textarea-id');
  // 格式化JSON方便查看，null为replacer参数，2为缩进空格数
  textarea.value = JSON.stringify(data, null, 2);
});

// 示例：实时同步（若#output为contenteditable）
const output = document.getElementById('output');
output.addEventListener('input', () => {
  const data = extractDataFromDOM();
  const textarea = document.getElementById('your-textarea-id');
  textarea.value = JSON.stringify(data);
});

关键注意事项

• JSON转义处理：JSON.stringify会自动处理字符串中的特殊字符（引号、换行等），读取时用JSON.parse还原即可，无需手动转义。
• 异常处理：解析JSON必须加try-catch，避免非法JSON导致页面崩溃，同时可添加数据结构校验（如检查是否为数组、是否包含必填字段）。
• DOM结构匹配：extractDataFromDOM中的选择器必须和渲染时的HTML结构完全对应，否则会出现数据提取失败的情况。

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