如何对比Syncfusion富文本编辑器本地存储内容与数据库字段日期？

一、可行性确认 #

完全可以实现，核心思路是自定义localStorage的存储结构，同时保存编辑器内容和对应的时间戳，再与数据库返回的最后保存日期做对比，选择加载较新的版本。

二、具体实现步骤 #

1. 调整持久化存储结构 #

不要只存纯文本/HTML内容，改为存储包含content和timestamp的JSON对象：

// 保存时的逻辑（替换原Syncfusion持久化保存逻辑）
function saveEditorState(editorContent) {
  const persistData = {
    content: editorContent,
    timestamp: Date.now() // 记录当前毫秒级时间戳
  };
  localStorage.setItem('sf-editor-draft', JSON.stringify(persistData));
}

2. 对接Syncfusion编辑器的持久化回调 #

如果使用官方内置的持久化功能，可通过persistenceSave和persistenceLoad钩子自定义存储逻辑：

const editor = new RichTextEditor({
  persistenceSettings: {
    enable: true,
    // 自定义保存逻辑
    persistenceSave: (key, value) => {
      const persistData = {
        content: value,
        timestamp: Date.now()
      };
      localStorage.setItem(key, JSON.stringify(persistData));
    },
    // 自定义加载逻辑
    persistenceLoad: (key) => {
      const storedStr = localStorage.getItem(key);
      return storedStr ? JSON.parse(storedStr).content : null;
    }
  }
});

3. 时间戳对比与内容加载 #

页面初始化时，先拉取数据库的最新内容和保存时间，再读取本地草稿做对比：

async function initEditor() {
  // 1. 从接口获取数据库中的内容和最后保存时间
  const dbResponse = await fetch('/api/get-editor-content');
  const dbData = await dbResponse.json();
  const dbContent = dbData.content;
  const dbLastSaveTime = new Date(dbData.lastSaveTime).getTime(); // 转毫秒级时间戳

  // 2. 读取本地存储的草稿
  const storedDraftStr = localStorage.getItem('sf-editor-draft');
  let finalContent = dbContent;

  if (storedDraftStr) {
    const storedDraft = JSON.parse(storedDraftStr);
    const draftTimestamp = storedDraft.timestamp;

    // 3. 对比时间戳：本地草稿更新则加载草稿，否则加载数据库内容
    if (draftTimestamp > dbLastSaveTime) {
      finalContent = storedDraft.content;
      // 可添加提示："检测到未保存草稿，已自动加载"
    }
  }

  // 4. 将最终内容赋值给编辑器
  editor.value = finalContent;
}

// 初始化编辑器
initEditor();

4. 关键细节处理 #

• 数据库返回的lastSaveTime需为可解析的时间格式（如ISO字符串），转时间戳时统一用毫秒单位。
• 用户手动保存到数据库后，要清空本地草稿避免冲突：

function saveToDatabase() {
  fetch('/api/save-editor-content', {
    method: 'POST',
    body: JSON.stringify({ content: editor.value })
  }).then(() => {
    localStorage.removeItem('sf-editor-draft');
  });
}

三、关于localStorage时间戳的说明 #

localStorage本身不会自动记录数据的存储时间，必须手动在存储时写入时间戳字段。通过Date.now()生成毫秒级时间戳并和内容一起存入，就能在读取时准确获取存储时间。

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