如何通过localStorage保存div文本编辑器的格式属性？

一、先修复格式丢失的核心问题 #

你当前代码只保存纯文本的原因很简单：

• 存储时用了textContent，只会提取无格式的纯文本，应该换成innerHTML来保留HTML格式
• 加载时的选择器写错了，而且同样用了textContent，应该修正后设置innerHTML

修复后的存储与加载代码：

function storeText() {
  const textfield = document.getElementById("textfield");
  // 用innerHTML保存带HTML格式的完整内容
  const content = textfield.innerHTML;
  localStorage.setItem("text", content);
}

document.addEventListener('DOMContentLoaded', function(){
  const textfield = document.getElementById("textfield");
  const savedContent = localStorage.getItem("text");
  if (savedContent) {
    // 用innerHTML加载带格式的内容
    textfield.innerHTML = savedContent;
  }
});

二、替换废弃的execCommand方案 #

用标准的Selection和Range API手动处理富文本操作，完全替代execCommand：

buttons.forEach(button => {
  button.addEventListener('click', () => {
    const style = button.dataset['element'];
    handleRichTextStyle(style);
    storeText();
  });
});

function handleRichTextStyle(style) {
  const selection = window.getSelection();
  // 无选中内容时简化处理（可扩展为设置后续输入的默认格式）
  if (selection.rangeCount === 0) return;

  const range = selection.getRangeAt(0);

  // 分类型处理格式
  switch(style) {
    // 文本样式：用对应HTML标签包裹选中内容
    case 'bold':
      wrapSelectedContent(range, 'strong');
      break;
    case 'italic':
      wrapSelectedContent(range, 'em');
      break;
    case 'underline':
      wrapSelectedContent(range, 'u');
      break;
    // 对齐样式：直接设置编辑器容器的内联样式
    case 'justifyLeft':
      document.getElementById("textfield").style.textAlign = 'left';
      return;
    case 'justifyCenter':
      document.getElementById("textfield").style.textAlign = 'center';
      return;
    case 'justifyRight':
      document.getElementById("textfield").style.textAlign = 'right';
      return;
    default:
      return;
  }

  // 恢复选中状态
  selection.removeAllRanges();
  selection.addRange(range);
}

// 通用包裹选中内容的工具函数
function wrapSelectedContent(range, tagName) {
  const wrapper = document.createElement(tagName);
  const selectedContent = range.extractContents();
  wrapper.appendChild(selectedContent);
  range.insertNode(wrapper);
}

补充说明 #

• 对齐样式是作用于整个编辑器容器的，直接设置textAlign即可，存储时innerHTML会保留内联样式
• 如果需要支持「未选中内容时，后续输入自动应用格式」，可以进一步扩展代码（比如给编辑器添加对应样式类，或处理光标位置的格式继承）

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