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

【初心者向け】HTML Window sessionStorageプロパティの使い方と実装例

HTMLのWindow sessionStorageプロパティは、キーと値（key/value）のペアで構成されるデータをブラウザ上に一時的に保存するための機能です。sessionStorageに保存されたデータは「1つのセッション」の間だけ有効で、ブラウザのタブを閉じると自動的に削除されます。

sessionStorageとlocalStorageの違い

sessionStorageはlocalStorageとよく比較されます。両者の主な違いは以下の通りです。

  • sessionStorage： データは現在のセッション（タブ）のみで保持され、タブを閉じると削除されます。
  • localStorage： データは明示的に削除しない限り永続的に保持されます。

構文（Syntax）

sessionStorageプロパティの基本構文は次のとおりです。

window.sessionStorage

主なメソッド

sessionStorageでは、以下のようなメソッドを使用してデータの操作を行います。

  • setItem(key, value)：指定したキーで値を保存します。
  • getItem(key)：指定したキーに対応する値を取得します。
  • removeItem(key)：指定したキーのデータを削除します。
  • clear()：sessionStorage内のすべてのデータを削除します。

実装例（Example）

ここでは、実際にHTML Window sessionStorageプロパティを使ったサンプルコードを紹介します。ボタンをクリックすると名前をsessionStorageに保存し、別のボタンで保存された値を表示します。

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #8BC6EC;
        background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%) no-repeat;
        text-align: center;
    }
    .btn {
        background: #db133a;
        border: none;
        height: 2rem;
        border-radius: 2px;
        width: 30%;
        display: block;
        color: #fff;
        outline: none;
        cursor: pointer;
        margin: 1rem auto;
    }
    .show{
        font-size:1.2rem;
    }
</style>
<body>
<h1>HTML Window sessionStorage Property Demo</h1>
<button onclick="store()" class="btn">Store 'John Smith' Name to sessionStorage</button>
<button onclick="display()" class="btn">Display sessionStorage stored value</button>
<div class="show"></div>
<script>
    function store(){
        sessionStorage.setItem('firstName','John');
        sessionStorage.setItem('lastName','Smith');
        document.querySelector('.show').innerHTML='Name store successfully';
    }
    function display(){
        var firstName=sessionStorage.getItem('firstName');
        var lastName=sessionStorage.getItem('lastName');
        document.querySelector('.show').innerHTML='Name stored in sessionStorage is: '+ firstName +' '+lastName;
    }
</script>
</body>
</html>

実行結果（Output）

まず、「Store 'John Smith' Name to sessionStorage」ボタンをクリックして、名前をsessionStorageに保存します。

次に、「Display sessionStorage stored value」ボタンをクリックすると、保存された値が画面に表示されます。

デベロッパーツールでの確認方法

ブラウザのデベロッパーツール（DevTools）を開き、「Application」タブから「Session Storage」を選択すると、実際にどのようにデータが保存されているかを確認できます。キーと値が正しく格納されているかを目視でチェックできるので、デバッグ時にも非常に便利です。

まとめ

sessionStorageは、タブを閉じるまでの間だけデータを保持したい場合に最適なWeb Storage APIです。フォームの一時入力内容やページ遷移時の状態管理など、セッション単位のデータ保存が必要なシーンで活用してみてください。

  1. HTML DOM Window frameElementプロパティの使い方を徹底解説

    HTML DOMのWindow frameElementプロパティは、現在のウィンドウが埋め込まれているHTML要素（<embed>、<iframe>、<object>など）を取得するためのプロパティです。ウィンドウがiframeなどの要素に埋め込まれていない場合（トップレベルウィンドウの場合）、このプロパティはnullを返します。そのため、ページがフレーム内で表示されているかどうかを判定したい場面で非常に役立ちます。構文frameElementプロパティの基本的な構文は以下のとおりです。window.frameElement使用例ここでは、HTML DOM

  2. HTML DOMのWindow closedプロパティとは？使い方とサンプルコードを解説

    HTML DOMのWindow closedプロパティは、ウィンドウが閉じられているかどうかの状態を示す真偽値（boolean）を返します。ウィンドウがすでに閉じている場合はtrue、まだ開いている場合はfalseが返されます。このプロパティは、window.open()で開いたポップアップウィンドウの状態を監視したり、ユーザーによって閉じられたウィンドウを再オープンするかどうかを判定したりする際に非常に便利です。構文Window closedプロパティの構文は以下の通りです。window.closed戻り値：true（ウィンドウが閉じている場合）／ false（ウィンドウが開いている場合）サ