HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTML5のlocalStorageとsessionStorageの違いと使い方を徹底解説！サンプルコード付き

HTML5 Web Storageとは？Cookieとの違い

HTML5では、HTTPセッションCookieに似た仕組みとして、クライアント側（ブラウザ）に構造化データを保存するための2つの機能が導入されました。これらは従来のCookieが抱えていた以下のような課題を解決するために設計されています。

  • CookieはすべてのHTTPリクエストに自動的に付加されるため、同じデータが何度も送信され、Webアプリケーションのパフォーマンスが低下してしまう。
  • Cookieに保存できるデータは約4KBまでという制限があり、必要なデータを格納するには容量不足。

HTML5で導入された2つのストレージ機構が「sessionStorage（セッションストレージ）」と「localStorage（ローカルストレージ）」です。どちらも同じWeb Storage APIに属しますが、データの保持期間や適用範囲が異なるため、用途に応じて使い分けることが重要です。

sessionStorage（セッションストレージ）とは

sessionStorageは、ユーザーが単一のトランザクション（一連の処理）を実行しているシナリオ向けに設計されたストレージです。たとえ複数のウィンドウで同時に別々のトランザクションを行っている場合でも、各ウィンドウごとに独立したセッションデータが保持されます。

主な特徴：

  • データの有効期間はブラウザタブ（セッション）単位
  • タブを閉じると保存したデータは消去される
  • 同じページでも、別タブで開いた場合はデータが共有されない

以下のコードを実行すると、セッション変数を設定し、その値にアクセスすることができます。

sessionStorageのサンプルコード

<!DOCTYPE HTML>
<html>
    <body>
        <script type="text/javascript">
            if( sessionStorage.hits ){
                sessionStorage.hits = Number(sessionStorage.hits) +1;
            } else{
                sessionStorage.hits = 1;
            }
            document.write("Total Hits :" + sessionStorage.hits );
        </script>
        <p>ページを更新するとヒット数が増えます。</p>
        <p>ウィンドウを閉じて再度開くと、結果を確認できます。</p>
    </body>
</html>

この例では、ページを再読み込みするたびにアクセスカウンターの数値が1ずつ増えていきます。ただし、ウィンドウ（タブ）を閉じるとカウンターはリセットされます。これはsessionStorageのデータがセッションの終了とともに破棄されるためです。

localStorage（ローカルストレージ）とは

localStorageは、複数のウィンドウにまたがるデータ保存や、現在のセッション終了後もデータを保持したい場合向けに設計されたストレージです。特に、パフォーマンス向上のために、ユーザーが作成したドキュメント全体やメールボックスなど、メガバイト級のユーザーデータをクライアント側に保存したいWebアプリケーションにとって有用です。

主な特徴：

  • 保存したデータに有効期限はなく、明示的に削除しない限り永続的に残る
  • ブラウザやOSを再起動してもデータは維持される
  • 同一オリジンのすべてのタブ・ウィンドウ間でデータが共有される
  • 多くのブラウザで約5MB〜10MBの容量が利用可能

以下のコードを実行すると、ローカルストレージ変数を設定し、このページにアクセスするたびにその値にアクセスできます。次回ウィンドウを開いたときにも値は引き継がれます。

localStorageのサンプルコード

<!DOCTYPE HTML>
<html>
    <body>
        <script type="text/javascript">
            if( localStorage.hits ){
                localStorage.hits = Number(localStorage.hits) +1;
            } else{
                localStorage.hits = 1;
            }
            document.write("Total Hits :" + localStorage.hits );
        </script>
        <p>ページを更新するとヒット数が増えます。</p>
        <p>ウィンドウを閉じて再度開いても、結果を確認できます。</p>
    </body>
</html>

この例でもアクセスカウンターを実装していますが、sessionStorageとの大きな違いは、ウィンドウを閉じて再度開いてもカウンターの値がリセットされない点です。localStorageのデータは永続的に保存されるため、ブラウザを閉じても次回アクセス時に前回の値から継続してカウントされます。

sessionStorageとlocalStorageの使い分けまとめ

項目sessionStoragelocalStorage
データの保持期間タブを閉じるまで（セッション中のみ）明示的に削除するまで永久に保持
データの共有範囲同じタブ内のみ同一オリジンの全タブ・ウィンドウ
保存容量の目安約5MB約5MB〜10MB
適した用途一時的な入力内容、フォームの状態保持などユーザー設定、テーマ、ログイン状態の記録など

このように、一時的なデータの保存にはsessionStorageを、長期的に保持したいデータにはlocalStorageを使い分けることで、より快適で高性能なWebアプリケーションを構築できます。

  1. 【初心者向け】iCloudの使い方徹底ガイド|設定方法・料金・便利な機能まとめ

    iCloudはApple製品の中でも謎めいた存在に思われがちです。「そもそもiCloudとは何なのか?」「何ができるのか?」「アカウントの作り方は?」「豊富な機能をどう使いこなせばいいのか?」――そんな疑問をお持ちの方も多いのではないでしょうか。 本記事では、iCloudの基本的な仕組みから、数多くのサービスや機能を最大限に活用する方法まで、知っておくべき情報をすべて解説します。 iCloudとは? iCloudとは、Appleが提供するクラウドベースのサービス群の総称です。メール、連絡先やカレンダーの同期、紛失したデバイスの位置情報確認(iPhone/iPadを探す)、クラウド上への音楽保存

  2. Windows 11のストレージセンサー(Storage Sense)を活用してディスク容量を自動整理する方法

    Windows PCには、ハードディスクをクリーンアップして効率を最適化できる便利なツールが標準搭載されています。それが「ストレージセンサー(Storage Sense)」です。空き容量がほとんどないハードディスクは、PCユーザーにとって最大の敵といえます。ディスクがほぼ満杯の状態になると、PCのパフォーマンスが大幅に低下し、アプリのクラッシュやエラーが頻発する原因になります。解決策は、ディスクをクリーンアップし、容量を大量に消費している大きなファイルを削除することです。幸い、Windows 11ならこの作業を簡単に行えます。ストレージセンサーを有効にすると、システムファイル、一時ファイル、古