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()函数不覆盖已经保存在本地存储中的现有内容。

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

我相信我需要将状态保存到本地存储中的一个数组中，每当我按下保存键时，它就会在数组的末尾追加新的数据。但我不知道如何实现这个功能。如果有任何帮助，我将感激不尽。

Answer 1

当组件挂载或更新时，会获取到 text 从 localStorage 如果存在，并将其设置在状态中。然后在文本更改时更新状态，在保存时设置为 localStorage 国文 text.