【うぇぶすとれーじ】

Web Storage（localStorage/sessionStorage）とは？

最終更新: 2026年10月9日

💡 ブラウザー内に、文字列のキーと値を保存する

ブラウザー内へ文字列のキーと値を保存する仕組み。localStorageはセッションを越える保存、sessionStorageはタブなどのページセッション内の保存に使う。保存期間や利用可否にはブラウザーの設定なども影響する。

📌 このページのポイント

localStorageはセッションを越えて使え、sessionStorageはページセッション単位で扱う。保存期間や利用可否にはブラウザーの設定などの条件がある。

ひよこ

どうやって保存するの？

ペンギン先生

文字列のキーと値を組にして、JavaScriptで読み書きするよ。localStorage.setItem("theme", "dark")で保存し、localStorage.getItem("theme")で読む例だね。sessionStorageも同じ形のAPIを使えるんだ。

ひよこ

localStorageならずっと残る？

ペンギン先生

通常のブラウザー終了を越えて保存するための領域だけど、永久保存の保証はないよ。利用者による削除やブラウザー側の処理で消えることがある。テーマ設定などに使えても、大切なデータの唯一の保存先にはしないでね。

ひよこ

sessionStorageは再読み込みすると消える？

ペンギン先生

同じページセッションでの再読み込みでは残るよ。基本的にはタブやウィンドウを閉じるとセッションが終わる。復元時の扱いもあり、ページセッションを単なる一回の表示と考えないでね。別タブとは通常別の保存領域だよ。

ひよこ

Cookieと同じようにサーバーへ送られる？

ペンギン先生

Web Storageの値がHTTPリクエストへ自動で付くことはないよ。サーバーへ送るにはアプリ側の処理が必要だね。容量は環境などで異なるので、一律に5〜10MB使えると決めず、制限も考えて使うんだ。

ひよこ

保存できないときはどうなるの？

ペンギン先生

容量制限ならQuotaExceededError、利用が許可されない条件ならSecurityErrorなどが起き得るよ。try/catchで読み書きの失敗を扱い、保存できなくても使える動作を考えよう。プライベートモードや設定の違いも確認するんだ。

もっと詳しく知りたい人へ

オブジェクトや大きなデータも入れられる？

保存する値は文字列なので、オブジェクトはJSON.stringifyなどで変換し、読む側も形式を確認するよ。APIは同期的に処理するため、大量の読み書きは画面の応答に影響し得る。構造化した大きなデータではIndexedDBなども検討しよう。

同一オリジンのスクリプトが読み書きでき、パスごとの分離もないよ。XSSで動いたコードにも読まれ得るため、パスワードやセッション識別子などの保管庫にしない。保存された値も信用せず、使うときに内容を確認するんだ。

まとめ：ざっくりこれだけ覚えればOK！

「Web Storage」って出てきたら「ブラウザーにキーと値を保存するlocalStorageとsessionStorage」と思えばだいたいOK！

📖 おまけ：英語の意味

「Web Storage」＝ Web用の保存領域

💬 Storage（貯蔵庫）の名前どおり、ブラウザの中にある小さなデータ倉庫のことだよ