React × Local Storage で本文と履歴を管理する

ユーザーがコピペした情報内に、曖昧な表現があった場合ハイライトして教えてくれるアプリを作成中、Local Storage を使用したのでメモを残しておきます。

Local Storage とは

WEB APIの一種で、ユーザーの端末にデータを保存でき、ページをリロードしても保持されます。
ログイン情報や一時的な設定保持など、ちょっとした永続化に便利です。

Local Storage 基本構文

保存

// setItem(key, value) で保存
localStorage.setItem('key', 'value');

取得

// getItem(key) で取得
const value1 = localStorage.getItem('key');

保存していた 'value' が返ってきます。

削除

// 指定した key だけ削除
localStorage.removeItem('key');

// 保存されている全データを削除
localStorage.clear();

イメージ

// 保存
localStorage.setItem('a', 'aaa');
localStorage.setItem('b', 'bbb');

console.log(localStorage.getItem('a')); // "aaa"
console.log(localStorage.getItem('b')); // "bbb"

// aだけ削除
localStorage.removeItem('a');
console.log(localStorage.getItem('a')); // null
console.log(localStorage.getItem('b')); // "bbb"

// 全部削除
localStorage.clear();
console.log(localStorage.getItem('b')); // null

本文を保存する

本文はエディタ入力後に「チェック」ボタンを押したタイミングで localStorage に保存します。
キー名は固定で、クリア時に削除します。

const STORAGE_KEY = "aimai__lastContent";
const [content, setContent] = useState(() => localStorage.getItem(STORAGE_KEY) ?? "");

// チェック時
localStorage.setItem(STORAGE_KEY, content);

// クリア時
localStorage.removeItem(STORAGE_KEY);

履歴を保存する & 削除する

チェック実行ごとに「文字数・検出件数・処理時間」などを履歴として localStorage に追加します。

export type RunHistory = {
  ts: number;
  length: number;
  count: number;
  ms: number;
  topWords: string[];
};

// チェックした履歴を保存する
export function pushHistory(r: RunHistory): RunHistory[] {
  const key = "aimai__history";
  const prev = loadHistory();
  const next = [r, ...prev].slice(0, 20); // 最大20件保持
  localStorage.setItem(key, JSON.stringify(next));
  return next;
}

// 読み込み
export function loadHistory(): RunHistory[] {
  try {
    return JSON.parse(localStorage.getItem("aimai__history") ?? "[]");
  } catch {
    return [];
  }
}

// local Storage の履歴を削除する
export function clearHistory() {
  localStorage.removeItem("aimai__history");
}

挙動まとめ

• 本文は「チェック」で保存、「クリア」で削除
• 履歴は「チェック」で追記、「履歴削除」で全件削除

Local Storageのメリット

メリットを挙げるなら、こんな感じでしょうか。

• DBやサーバー不要で簡単にデータを残せる
• ブラウザだけで完結する
• ページリロードやブラウザ再起動後もデータが保持される
• 実装がシンプル（getItem / setItem / removeItem のみ）

実装がシンプルって、めっちゃありがたい。。。

Local Storageのデメリット

• 暗号化されずJSから読み取り可能なためセキュリティに弱い
• 同じユーザーが別端末からアクセスしても同期されない

保存容量が少なのもありますが、これはデメリットではないですね。

まとめ

localStorage を使えば、DB をまだ用意していない段階でも「直近の入力内容や履歴」をブラウザに残せます。
注意点として、データは削除しない限り残り続けるので、クリアボタンや削除処理を用意する必要があります。