プログラミング技術

本サイトはプロモーションが含まれています。

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

ReactでlocalStrageを操作する【サンプルあり】
初心者さん
localStrage(ローカルストレージ)って何だろう?sessionStorage(セッションストレージ)と何が違うんだろう?

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

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

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

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

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

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

この記事を書いた人

くろめがね

特別何か持っているわけではない普通の人が未経験からエンジニアに転職し、10年以上経験を積みフリーランスエンジニアになり、単価80万〜140万の案件に参画し稼げるように。プログラミングを始めた頃は、「プログラミング向いていないかも」、「自分のスキルレベル低い」と感じ悩んだ経験がある。

  • 元プログラミングスクール運営企業の社員のためプログラミングの学習に詳しい
  • 自分と同じように悩んでいる初心者へのアドバイスが得意。

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を使ってみましょう。

-プログラミング技術