ReactでlocalStrageを操作する【サンプルあり】

初心者さん

localStrage（ローカルストレージ）って何だろう？sessionStorage(セッションストレージ)と何が違うんだろう？

このような疑問をお持ちの方に向けて書いています。

localStrageはたまに使うけど、sessionStrageやcookieと何が違うのかわからない。さらに最近はindexedDBというブラウザデータベースのようなものもあります。

このあたりの解説となっています。よく使われるlocalStrageを実際に使ってみたいと思います。

▼この記事で理解できる点は以下です。

ブラウザに格納しておける種類が増えてややこしいという人は、最後までご覧になってみてください。

この記事の信頼度

くろめがね

・エンジニア歴10年以上
・バックエンドがメインでフロント開発も行うフルスタック
・プログラミングスクール運営側の経験あり
・単価約100万↑のフリーランスエンジニア

localStrageとsessionStrageとCookieの違い

開発者ツールのアプリケーションタブを開くとストレージの情報を見ることができます。ブラウザ上に保存できる箱の種類がなぜこんなに多いでしょう。

あまり聞いたことがないのもあるかもしれませんが、このくらいあります。それぞれどのような違いがあるかざっくり紹介していきます。

ローカルストレージ(localStrage)とは

ローカルストレージは、ECサイトでの閲覧履歴などのちょっとした情報を入れておくのに有効です。

このような感じの特徴があるので、データベースと比較すると軽量で使いやすい。

セッションストレージ(sessionStrage)とは

セッションストレージ(sessionStrage)は、ローカルストレージに似ていますが、タブを閉じるとデータが消滅するという特徴があります。

つまり別のタブを開いても、元のタブのセッションストレージのデータは引き継ぎたくない時に使います。（どんな時だろう？思いつかん）

クッキー(cookie)とは

クッキー(cookie)は、保存期限があり、容量も少ない、通信が発生するという特徴があり使いにくいです。

indexedDBとは

indexedDBは、ブラウザ上のデータベースですが、SQLは使えない、古いデータから消えていくという状況なので大きなデータを保存しておくものではない。

古いデータから消えてしまうということで、ちょっとした機能で一時的に使うというのが使いやすいかもしれないです。

ReactでlocalStrageを使ってみる

なんだかんだでlocalStrageが一番使いやすいのではと思います。実際にサンプルコードを書いてみます。

localStrageの使い方

localStrageは、(key, value)をセットで指定する必要があります。取得も保存も削除も簡単ですね。

// 取得
localStorage.getItem('key')

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

// 削除
localStorage.removeItem('key');

ReactでlocalStrageを使ったサンプル

import React, { useState } from 'react'
const ReactStorageKey = 'app/textarea'

const App: React.FC = () => {
  const [text, setText] = useState<string>(localStorage.getItem(ReactStorageKey) || '')
  return (
    <textarea
      // changeイベントで変更したテキストを処理
      onChange={(event) => {
        // 入力したテキストを変数に保持
        const inputText = event.target.value
        // localStrageに「'app/textarea'」というキーで保存
        localStorage.setItem(ReactStorageKey, inputText)
        // 状態を管理
        setText(inputText)
      }}
      // 現在の状態を表示
      value={text}
    />
  );
}

export default App;

localStrageに保存されていることが確認できました。

入力した値がlocalStrageに保存されているため、リロードしてもtextareaに値が残っています。

ReactでlocalStrageを操作するまとめ

localStrageを使うと、簡単に機能を拡張できるかもしれませんね。

サーバー側で何かしたいという場合は、Cookieを使う必要がありますが、フロントでもいい機能であればlocalStrageを使ってみましょう。