プログラミング

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

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

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

今回は、このような疑問に答えていきます。

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

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

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

  1. localStrageとsessionStrageとCookieの違い
  2. indexedDBって何?
  3. localStrageの使い方

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

この記事の信頼度

くろめがね
・エンジニア歴10年以上
・IT企業転職歴も3回以上
・プログラミングスクール運営側の経験あり
・現在はフリーランスエンジニアとして企業に常駐(在宅勤務)

localStrageとsessionStrageとCookieの違い

strage

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

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

  • ローカルストレージ(localStrage)
  • セッションストレージ(sessionStrage)
  • クッキー(cookie)
  • indexedDB

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

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

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

  • 保存期限がない
  • 容量5MB
  • 通信なし

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

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

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

  • タブを閉じるとデータが消滅
  • 容量5MB
  • 通信なし

クッキー(cookie)とは

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

  • 有効期限あり
  • 容量4KB
  • 通信あり

indexedDBとは

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

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

  • 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に保存されていることが確認できました。

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

ReactでlocalStrageを操作するまとめ

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

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

-プログラミング