Draftjs如何将输入数据保存到LocalStorage而不覆盖以前的数据？

Question

我正在使用 Draftjs 富文本编辑器将我的文本输入保存到本地存储。 现在，我的程序能够接受文本输入，当我点击保存时，它会将文本输入保存到我的本地存储中。 代码：

import React from "react";
import { Editor, EditorState, convertToRaw } from "draft-js";

class SaveData extends React.Component {
  constructor(props) {
    super(props);
    this.state = { editorState: EditorState.createEmpty() };
    this.onChange = (editorState) => this.setState({ editorState });
  }

  getContentAsRawJson() {
    const contentState = this.state.editorState.getCurrentContent();
    const raw = convertToRaw(contentState);
    return JSON.stringify(raw, null, 2);
  }
  saveContent() {
    const json = this.getContentAsRawJson();
    localStorage.setItem("savedContent", json);
  }

  render() {
    return (
      <div>
        <Editor editorState={this.state.editorState} onChange={this.onChange} />
        <button onClick={this.saveContent.bind(this)}>Save Content</button>
        <pre>{this.getContentAsRawJson}</pre>
      </div>
    );
  }
}

export default SaveData;

来自文本编辑器的输入保存在本地存储中

但是，我需要 saveContent() function 来不覆盖已保存在本地存储中的现有内容。 我想要实现的一个示例如下所示：

• 我在文本编辑器中输入了一些文本，点击保存，文本保存在我的本地存储中。
• 然后我在文本编辑器中添加一些新文本，单击保存，文本将与我之前的输入一起保存而不会覆盖它。
• 将两个文本输入加载到文本编辑器中。

我相信我需要将状态保存到本地存储中的数组中，每当我按下保存时，它都会在数组末尾 append 新数据。 但我不知道如何实现这一目标。 任何帮助，将不胜感激。

Answer 1

当组件安装或更新时，从localStorage获取text （如果存在）并将其设置在 state 中。 然后在文本更改时更新 state 并在存储集上从 state text中保存localStorage文本。