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;

The input from the text editor saved in local storage

但是，我需要saveContent（）函数不覆盖已经保存在本地存储中的现有内容。我要实现的示例如下：

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

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

Answer 1

在安装或更新组件时，从text获取localStorage（如果存在）并将其设置为内部状态。然后根据文本更改和保存状态localStorage更新text文本的状态。

DraftsJS如何在不覆盖先前数据的情况下将输入数据保存到LocalStorage？

1 个答案: