0Pricing
JavaScript Academy · レッスン

localStorage と sessionStorage

適切なデータ保持期間のストレージを選びます。

「localStorage と sessionStorage」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全4レッスンが含まれています。

2 つのストア、同じ API

localStorage と sessionStorage は同じメソッドを共有します。違いは存続期間、つまりデータがどれだけ長く残るかです。

localStorage は永続化される

localStorage のデータは明示的に削除するまで残ります。ページの再読み込み、タブの閉じる操作、ブラウザーの再起動を行っても保持されます。

localStorage.setItem("theme", "dark");
// Still there days later, after closing the browser

sessionStorage は一時的

sessionStorage のデータはタブのセッション中だけ保持されます。タブを閉じると消去されます。

sessionStorage.setItem("step", "2");
// Gone once the tab is closed

タブごとの分離

ブラウザーの各タブには、それぞれ独自の sessionStorage があります。同じサイトを開いた 2 つのタブでも、セッションストアは別々で、データを共有しません。

localStorage は共有される

一方、同じオリジンのすべてのタブとウィンドウは、1 つの localStorage を共有します。あるタブで書き込んだ内容は、他のタブからも確認できます。

再読み込み時の動作

通常の再読み込みでは、そのタブの sessionStorage は保持されます。タブを複製するとセッションがコピーされる場合がありますが、新しいタブを開くと空の状態から始まります。

sessionStorage.setItem("draft", text);
// Survives F5 reload in the same tab

使い分け

長期間保持する設定（テーマ、言語）には localStorage を使用します。一時的なタブ単位の状態（ウィザードのステップ、一度きりのフォーム下書き）には sessionStorage を使用します。

セキュリティ上の注意

どちらのストアも安全ではありません。ページ上のあらゆるスクリプトから読み取れるため、パスワードや、非公開にしておく必要がある機密トークンは決して保存しないでください。

どちらも同じメソッド

API が同じなので、オブジェクト名だけを変更して一方を他方に置き換えられます。一方を対象に書いたコードは、もう一方でも動作します。

const store = useSession ? sessionStorage : localStorage;
store.setItem("k", "v");

プライベートブラウジング

プライベートモードやシークレットモードでは、通常、どちらのストアもセッション終了時に消去され、ブラウザーによっては使用が制限または無効化されます。書き込みに失敗する可能性を常に考慮してください。

try {
  localStorage.setItem("k", "v");
} catch (e) {
  console.log("storage unavailable");
}

クォータは別々

各ストアには独自のクォータがあります（通常はオリジンごとに約 5MB）。sessionStorage をいっぱいにしても、localStorage の容量は消費しません。

クイックチェック

2 つのストアを比較します。

まとめ

どちらのストアも同じ API を共有しますが、存続期間が異なります。localStorage はセッションをまたいで保持され、同じオリジンのすべてのタブで共有されます。一方、sessionStorage は 1 つのタブのセッション中だけ存在し、タブごとに分離されます。どちらも安全ではなく、それぞれに約 5MB の独自クォータがあります。

よくある質問

「localStorage と sessionStorage」レッスンは無料ですか？

はい。「localStorage と sessionStorage」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全4レッスンが含まれています。

「localStorage と sessionStorage」で何を学びますか？

適切なデータ保持期間のストレージを選びます。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

JavaScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「localStorage と sessionStorage」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJavaScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. データを保存して読み取る
  2. localStorage と sessionStorage
  3. JSON でオブジェクトを保存する
  4. Storage イベントと容量制限
← JavaScript Academyに戻る