【React】ローカルストレージを使ってみる
React でローカルストレージに触れてみよう！という自分向けの勉強です ❗
以前のリポジトリに追加していこうと思います。
何がしたいの？
勉強がしたい！
では 作っていきましょう 👻
まずは実装の調査です
ググって上の方にある下記のページに答えがありそうでした。
https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage
読みすすめるとー、、、
あ、これ WebAPI を叩く感じで、React とか関係ない感じですね（汗）
とりあえずサンプルを読む限りでは
// ローカルストレージにキーを指定して、それに紐づく値を保存
localStorage.setItem('myCat', 'Tom');
// ローカルストレージからキーを指定して取得
var cat = localStorage.getItem("myCat");
// ローカルストレージから対象のキーに紐づく値を削除
localStorage.removeItem("myCat");
はい、この記事これで終わりでもいい気がしてきましたが、React でデモページを作ってみます
デモページを作る
カレントディレクトリを以前作ったプロジェクトのトップに持っていきます。
# 具体例
# 過去のリポジトリを取ってくる
$ git clone https://github.com/sisi100/react-i-learned.git
# タグをチェックアウトする
$ git checkout 20210710
$ cd react-i-learned
次にデモページを作ります
下記な感じでpagesディレクトリ直下にLocalStorageDemoPageというディレクトリを作ってそこで作業をして行こうと思います。
が、ここは好みの問題ですので、好きな場所で実装すれば良いと思います ❗
# 操作例
$ mkdir -pv src/pages/LocalStorageDemoPage
実装してみる
ここは特に説明もなくコードが全て感がありますね。
ローカルストレージとやり取りするファイルは下記な感じ。
export enum KEYS {
SAMPLE_TEXT = "SAMPLE_TEXT",
}
export function getItem(key: KEYS) {
const value = localStorage.getItem(KEYS.SAMPLE_TEXT);
if (value !== null) {
return value;
}
return "";
}
export function removeItem(key: KEYS) {
localStorage.removeItem(key);
}
export function setItem(key: KEYS, value: any) {
localStorage.setItem(key, value);
}
そしてそれを利用する実装は下記な感じ。
import { useEffect, useState } from "react";
import { KEYS, setItem, getItem, removeItem } from "./LocalStorage";
import { Link } from "react-router-dom";
export const LocalStorageDemoPage: React.VFC = () => {
const [text, setText] = useState("");
const [label, setLabel] = useState("");
useEffect(() => {
updateLabel();
}, []);
const updateLabel = () => {
setLabel(getItem(KEYS.SAMPLE_TEXT));
};
const handleChange = (e: any) => {
setText(e.target.value);
};
const removeClick = () => {
// LocalStorageの値を削除する
removeItem(KEYS.SAMPLE_TEXT);
updateLabel();
};
const setClick = () => {
// テキストボックスの値をLocalStorageに保存する
setItem(KEYS.SAMPLE_TEXT, text);
updateLabel();
};
const getClick = () => {
// LocalStorageの値をテキストボックスに入れる
setText(getItem(KEYS.SAMPLE_TEXT));
updateLabel();
};
return (
<div>
<p>
保存する値：
<input type="text" value={text} onChange={handleChange} />
</p>
<p>保存された値:{label}</p>
<button onClick={setClick}>保存する</button>
<button onClick={getClick}>呼び出す</button>
<button onClick={removeClick}>削除する</button>
<p>
<Link to="/">トップへ戻る</Link>
</p>
</div>
);
};
あとはパスが通るように設定して、動作を確認すると下記な感じです。
保存するでローカルストレージに保存して、リロードしても保存されてます。
で、呼び出すでローカルストレージから引っ張って、削除するでローカルストレージから削除します
うん。。。Frontend は動きがすぐに見えて新鮮ですねー、、ということで実装はここまでにします。
まとめ
勉強のために React でローカルストレージを使ってみました。
ローカルストレージは WebAPI だったので、React である必要はありませんでしたが、
動作のデモページを実装して動作確認をしました ❗