今回は、クライアントであるユーザーのブラウザにデータを保存する方法を学びます。
以前は主にCookieを使っていましたが、容量が小さく、HTTPリクエストに自動で含まれるため、ネットワークに負荷をかけるという欠点がありました。
こうした問題に対応するため、HTML5で
Web Storage API
が登場しました。その中心が
ローカルストレージ
と
セッションストレージ
です。
2つは使い方がほぼ同じなので混同しやすいものの、データがいつまで残るかには大きな違いがあります。
それぞれの特徴と違いを比較し、どんな状況でどちらを使うかを見ていきます。
ローカルストレージ（Local Storage）は閉じても残る保管場所 🔗 ローカルストレージ
は、ブラウザにデータを
永続的に
保存するキーと値のストレージです。
「永続的」とは、ブラウザを閉じたりコンピューターを再起動したりしてもデータが残ることです。
JavaScriptで明示的に削除しない限り、データは残ります。
// 데이터 저장 localStorage. setItem ( 'username' , 'Alice' );
// 데이터 조회 const username = localStorage. getItem ( 'username' ); // 'Alice'
// 데이터 삭제 localStorage. removeItem ( 'username' );
// 모든 데이터 삭제 localStorage. clear ();
主な用途
自動ログイン時にユーザーIDを覚えておく、ダークモードやライトモードといったテーマを保存するなど、ブラウザを閉じて再び開いたときにも残したい設定に向いています。
セッションストレージ（Session Storage）は閉じると消える一時保管場所 🔗 セッションストレージ
もキーと値のストレージですが、データが
現在のセッション中に限って
残ります。
ここでのセッションは、簡単に言えば
ブラウザのタブ1つ
と考えられます。
タブを閉じると、そのタブのセッションストレージに保存していたデータはすぐに消えます。
使い方
API（メソッド）はローカルストレージと同じです。
// 데이터 저장 sessionStorage. setItem ( 'tempData' , '이것은 임시 데이터입니다.' );
// 데이터 조회 const tempData = sessionStorage. getItem ( 'tempData' );
主な用途
フォームに入力中の内容を一時保存して再読み込みで消えないようにする、ページのスクロール位置を覚えておく、ポップアップやお知らせの「今日は表示しない」状態を管理するなど、そのタブで一時的に必要な情報の保存に向いています。
ローカルストレージとセッションストレージ
2つのストレージとCookieの違いは、フロントエンド開発者の基礎を確認する定番の質問です。
1. ローカルストレージとセッションストレージの違いは何ですか？ 🔗 永続性
と
スコープ
の観点から、主要な違いを説明します。
どちらもWeb Storage APIの一部で、使い方は同じですが、**データの永続性（ライフサイクル）
と
スコープ（有効範囲）**が異なります。
ローカルストレージ
のデータは明示的に消すまで
永続的に
残り、同じオリジンのタブやウィンドウ間で
共有
されます。
セッションストレージ
のデータは、
現在のタブのセッション中だけ
保持され、タブを閉じるとすぐに消えます。
また、有効範囲は現在のタブに限られ、他のタブとは
共有されません
。
2. CookieとWeb Storage（ローカル／セッションストレージ）の違いは何ですか？ 🔗 Cookieとの根本的な違いを、特にサーバーとの通信に着目して説明します。
最も大きな違いは、
サーバーとの通信方法
と
容量
です。
Cookie
はHTTPリクエストのヘッダーに自動で含まれてサーバーへ送られるため、認証など、サーバーが把握する必要のある状態の保持に使います。
その分、通信量が増え、容量も約4KBと非常に小さくなります。
Web Storage
のデータはサーバーへ自動送信されず、クライアント側で使います。
サーバーに送る必要があれば、JavaScriptで読み取って明示的に送信します。
容量も約5〜10MBとCookieより大きく、クライアント側だけのデータを保存するのに適しています。
今回は、ブラウザにデータを保存する2つの方法を学びました。
ローカルストレージ
は、永続的なデータ
を入れて共有
する保管場所です。セッションストレージ
は、一時的なデータ
を入れるタブごとの保管場所
です。どちらもCookieと異なり、サーバーに自動で送られないため、クライアント側の保存に使えます。
ローカルストレージとセッションストレージ - ブラウザの保存領域