Черновик js как сохранить входные данные в LocalStorage без перезаписи предыдущих данных? - PullRequest
Новая
       39

Черновик js как сохранить входные данные в LocalStorage без перезаписи предыдущих данных?

0 голосов
/ 05 мая 2020

Я использую черновой js текстовый редактор, чтобы сохранить введенный текст в локальное хранилище. Прямо сейчас моя программа может вводить текст, и когда я нажимаю кнопку «Сохранить», она сохраняет введенный текст в моем локальном хранилище. Код: 

<code>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}
); }} экспорт по умолчанию SaveData;

Ввод из текстового редактора, сохраненный в локальном хранилище

Однако мне нужна функция saveContent (), чтобы не перезаписывать существующий контент, который уже сохранен в моем локальном хранилище. Пример того, чего я хочу достичь, будет выглядеть так:

  • Я ввожу текст в текстовый редактор, нажимаю «Сохранить», текст сохраняется в моем локальном хранилище.
  • Затем Я добавляю новый текст в текстовый редактор, нажимаю «Сохранить», текст сохраняется вместе с моим предыдущим вводом, не перезаписывая его.
  • Загрузить оба текстовых ввода в текстовый редактор.

I считаю, что мне нужно сохранить состояния в массив в локальном хранилище, и всякий раз, когда я нажимаю «Сохранить», он добавляет новые данные в конец массива. Но я не понимаю, как этого добиться. Любая помощь приветствуется.

1 Ответ

0 голосов
/ 05 мая 2020

Когда компонент монтируется или обновляется, извлеките text из localStorage, если он существует, и установите его внутри состояния. Затем обновите состояние при изменении текста и при сохранении установите текст localStorage из состояния text.

...