如何在页面重新加载时从 localStorage 获取数据

Question

我正在尝试用 React 和 localStorage 做一个可保存的笔记。每当单击“保存”时，它应该将文本区域中的值保存到localStorage，并且每当'清除'被点击，它应该清除textarea和来自localStorage的数据。

import { useState } from "react";
import "./App.css";

function App() {
  const storage = window.localStorage;
  const [text, setText] = useState('');
  const data = storage.getItem('text');

  return (
    <div className="App">
      <div className="box">
        <div className="field">
          <div className="control">
            <textarea
              className="textarea is-large"
              placeholder="Notes..."
              value={data}
              onChange={(e) => setText(e.target.value)} />
          </div>
        </div>
        <button
          className="button is-large is-primary is-active"
          onClick={() => storage.setItem('text', text)}>Save</button>
        <button
          className="button is-large"
          onClick={() => {storage.removeItem('text'); setText('')}}>Clear</button>
      </div>
    </div>
  );
}

export default App;

它按预期工作，除了当我单击 'save' 时，我无法在文本区域中键入或删除任何内容。此外，当我单击 'clear' 时，它只会在我重新加载页面后清除该框。

我该如何解决这个问题？

Answer 1

首先，您应该使用状态变量text设置textarea的值，否则一旦您点击保存就无法再编辑它。这是因为本地存储上的值在您键入时保持不变，因此无法更新该值。

其次，您需要将状态变量 text 初始化为您在本地存储中的值（如果有的话）。不然刷新的时候一直是空的

应用这两项更改的代码如下：

function App() {
  const storage = window.localStorage;
  const data = storage.getItem('text');
  const [text, setText] = useState(data ?? '');

  return (
    <div className="App">
      <div className="box">
        <div className="field">
          <div className="control">
            <textarea
              className="textarea is-large"
              placeholder="Notes..."
              value={text}
              onChange={(e) => setText(e.target.value)} />
          </div>
        </div>
        <button
          className="button is-large is-primary is-active"
          onClick={() => storage.setItem('text', text)}>Save</button>
        <button
          className="button is-large"
          onClick={() => {storage.removeItem('text'); setText('')}}>Clear</button>
      </div>
    </div>
  );
}

export default App;

Answer 2

在 textArea 元素中，您必须将“值”指定为“文本”状态。

<textarea
     className="textarea is-large"
     placeholder="Notes..."
     value={text} // --> here
     onChange={(e) => setText(e.target.value)} />

看这里：Working example

如何在页面重新加载时从 localStorage 获取数据

how to get data from localStorage on page reload

javascript

local-storage

reactjs