React ローカルストレージを使う

ReactのStateを使う際にリロードをしても中身が保持されているようにしたい

ブラウザで動くPythonEditorを作っていたらある課題が発生。

ブラウザでリロードをかけるとEditorに記述していた中身が消えてしまう。
これをリロードしても中身を保持できるようにしたいぜ、っつーこと問題のコードがここ

使用環境
React
js
python
Flask

const [pythonCode, setPythonCode] = useState('');
~~~
pythonコードを処理するロジック
（諸事情により一部非表示）

<MonacoEditor
language="python"
theme="vs-dark"
value={pythonCode}
onChange={setPythonCode}
 />

現状はflaskサーバーと、フロントがの処理を

const [pythonCode, setPythonCode] = useState('');

がやっています。

これをそのまま出力stateに渡しているけどこれでは消えてしまう模様

今回やった処理

追加したコードはこれ

  // Local StorageからPythonコードを取得
  useEffect(() => {
    const storedCode = localStorage.getItem('pythonCode');
    if (storedCode) {
      setPythonCode(storedCode);
    }
  }, []);

  // MonacoEditorに入力されたコードをLocal Storageに保存
  const handleCodeChange = (newCode) => {
    setPythonCode(newCode);
    localStorage.setItem('pythonCode', newCode);
  };

自分へのアウトプットのためにやった処理を記述。

LocalStorageメソッドを初使用

ReactのlocalStorage（ローカルストレージ）は、
JavaScriptで作成されたサイトやアプリが、
ウェブブラウザにキー・バリュー形式のデータを保存するためのウェブストレージオブジェクトです。

有効期限がなく、ページを更新したり、ブラウザを再起動しても保存されたデータは残ります。

ブラウザに直接保存する小容量ストレージのようなもの。

当然ですが
ブラウザに直接残すので、PW管理などをこれでやるのは絶対NG

今回の場合ローカル実行が前提　　pythonのコードを残すという目的を最短で再現できるので採用

実際の記述がこの部分

  const handleCodeChange = (newCode) => {
    setPythonCode(newCode);
    localStorage.setItem('pythonCode', newCode);
  };

~~~~
<MonacoEditor
language="python"
theme="vs-dark"
value={pythonCode}
onChange={handleCodeChange}
/>

主な処理手順
1 onChangeで{handleCodeChange}が動く
2 monacoeditorに記述のあったコードをnewCodeがもらい、setPythonCodeが受け取る
3 newCodeからlocalStorage.setItem('pythonCode', newCode);に渡され保存される
4 useEffectを使用してレンダリングが起こったあとにpythonCodeをキーにしてsetPythonCodeに渡す

コード実行処理へ

まだまだセキュリティ意識を向けて精査していきますが、0-1でとりあえず動いたことに感動！

これからも頑張ります