【JS】個人的によく使うLocalStorageについて

ユーザーが一度ログインした後、ログイン状態を保持する方法はセッション、クッキー等様々あります。

個人でアプリケーションを作る際、私はブラウザのLocalStorageを使いがちです。（業務でもsessionStorageは使用経験有）

参考：MDN

https://developer.mozilla.org/ja/docs/Web/API/Window/localStorage

Local Storageはブラウザが提供するWeb Storage APIの一部で、クライアントサイドにデータを保存するための機能です。ローカルストレージは、データをキーバリュー形式で保存し、ブラウザを閉じてもデータが保持されるという特性があります。

Reactのrouterでの使用例

// データの保存
localStorage.setItem(
    "user",
    JSON.stringify({ userId: userDoc.id, userName: userData.userName })
);

// データの取得
const loggedInUser = localStorage.getItem("user");

// Reactでログイン状態を確認しルーティング
useEffect(() => {
    const loggedInUser = localStorage.getItem("user");
    
    // ユーザーがログイン済みである場合
    if (loggedInUser) {
        // ルーターを使ってホームページ（"/"）にリダイレクトします。
        router.push("/");
    }
}, [router]);

とにかくシンプルで使いやすいのが特徴で、ブラウザに値を持たせたい場合はログイン関連に限らず結構積極的に使用しています。

この方法のデメリットは、ブラウザのシークレットウィンドウで使用するとログイン状態を保持できないことや、約5MBのサイズ制限、複数タブを開いている場合の最新の状態がデフォルトでは保証できないetc…があります。

業務で使用したことはありませんが、個人で使う分には便利なAPIです。
ブラウザ内に値を簡単に保持できるので、ちょっとしたミニゲームをブラウザで作った際のセーブ機能等、様々なシーンでの用途が浮かぶ面白い機能だと思います。

はじめて技術的な話題で書いてみました。次回はまた別の話題で更新を予定しています。
（※こういう話題は誤情報や勘違いが怖いので、もし何かあれば随時修正します。）