【React初心者メモ】sessionStorageとlocalStorage

sessionStorageとは

sessionStorageは、ブラウザのWeb Storage APIの一つで、ユーザーのセッション中に一時的にデータを保存するためのストレージです。具体的には以下の特徴を持ちます。
・ページをリロードしてもデータは保持される
・タブやウィンドウを閉じると消える
・同じドメインでも、別のタブでは共有されない

基本的な使い方

基本：

// データを保存
sessionStorage.setItem("key", "value");

// データを取得
const value = sessionStorage.getItem("key");

// データを削除
sessionStorage.removeItem("key");

// 全てのデータを削除
sessionStorage.clear();

例：
ReactではuseEffectやuseStateを組み合わせて使うのが一般的です。

import { useEffect, useState } from "react";

const ContactForm = () => {
  const [name, setName] = useState("");

  // 初回ロード時に保存済みデータを読み込む
  useEffect(() => {
    const savedName = sessionStorage.getItem("name");
    if (savedName) {
      setName(savedName);
    }
  }, []);

  // nameが変わるたびにsessionStorageへ保存
  useEffect(() => {
    sessionStorage.setItem("name", name);
  }, [name]);

  return (
    <input
      type="text"
      value={name}
      onChange={(e) => setName(e.target.value)}
      placeholder="名前を入力してください"
    />
  );
};

export default ContactForm;

オブジェクトや配列の保存

sessionStorageは、文字列しか保存できません。
オブジェクトや配列はJSON.stringify して保存し、JSON.parseして取得します。

const obj = { user: "Alice", age: 25 };

// 保存
sessionStorage.setItem("userData", JSON.stringify(obj));

// 取得
const userData = JSON.parse(sessionStorage.getItem("userData") || "{}");

localStorageとは

localStorageは、ブラウザのWeb Storage API の1つで、ブラウザにデータを永続的に保存するための仕組みです。具体的には以下の特徴を持ちます。
・ドメインごとに永続的にデータを保存できる
・ブラウザを閉じてもデータは残る

基本的な使い方

基本：

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

// 取得
const value = localStorage.getItem("key");

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

// すべてのデータを削除
localStorage.clear();

例：

import { useState, useEffect } from "react";

const LocalStorageExample = () => {
  const [name, setName] = useState("");

  useEffect(() => {
    // ページ読み込み時にlocalStorageから取得
    const saved = localStorage.getItem("name");
    if (saved) setName(saved);
  }, []);

  useEffect(() => {
    // nameが変わったら保存
    localStorage.setItem("name", name);
  }, [name]);

  return (
    <input
      value={name}
      onChange={(e) => setName(e.target.value)}
      placeholder="名前を入力"
    />
  );
};

オブジェクトや配列の保存

sessionStorage同様に、localStorageも文字列しか保存できません。
オブジェクトや配列はJSON.stringifyして保存し、JSON.parse して取得します。

const user = { name: "田中", age: 30 };

// 保存
localStorage.setItem("user", JSON.stringify(user));

// 取得
const storedUser = JSON.parse(localStorage.getItem("user") || "{}");
console.log(storedUser.name); // "田中"