JavaScript でのセッション ストレージ

1. Web ストレージ VS Cookie
2. ウェブストレージの種類
3. JavaScript の sessionStorage オブジェクト
4. データ項目をセッション ストレージに追加する
5. 提供されたキーのアイテム値を取得する
6. セッションストレージからアイテムを削除

Web ストレージは、HTML5 Web API で導入された革新的な機能の 1つです。 クライアント側、特にブラウザ内にデータを保存できます。

データはキーと値のペアとして Web ストレージに保存されます。 Web の世界では、DOM ストレージとも呼ばれます。

Web ストレージ VS Cookie

ストレージ メカニズムとして、Web ストレージは Cookie に似ています。 Web ストレージでは、ドメイン/ブラウザ タブおよびプロトコルごとに最大 5MB を保存できます。

したがって、同じソースからの Web ページは、同じ Web ストレージにアクセスして操作できます。 さらに、Web ストアが完全に占有されている場合、ブラウザーは警告メッセージをスローする場合があります。

古い学校の Cookie に関して言えば、これらはすべてのサーバー要求で送信する必要があり、パフォーマンスに悪影響を及ぼします。 Cookie とは対照的に、Web ストレージはサーバーにデータを送信しません。

そのため、ユーザーのローカル コンピューター スペースを使用して、Cookie よりも高速かつ安全にデータを保存します。

ウェブストレージの種類

Web ストレージ API で使用できる主な Web ストレージの種類は 2つあります。 各タイプは、その有効期間とスコープに基づいて区別されます。

セッション ストレージ

セッション ストレージは、セッションごとのデータの保存に制限されているため、ブラウザを再読み込みまたは閉じた場合、データは永久に失われます。

ローカルストレージ

ローカル ストレージは、その有効期間においてセッション ストレージとはわずかに異なります。 ブラウザーを更新したり、閉じて再度開いたりしても、データを保持できます。

したがって、JavaScript API を使用してデータを削除するか、ブラウザのキャッシュを消去するまで、ローカル ストレージ データの有効期限はありません。

このガイドでは、セッション ストレージの実装とその使用法に焦点を当てます。

JavaScript の sessionStorage オブジェクト

通常、ブラウザの Window オブジェクトは、sessionStorage プロパティを所有する WindowSessionStorage オブジェクトを実装します。 したがって、window.sessionStorage を呼び出すと、次のように Web Storage オブジェクトのインスタンスが作成されます。

ブラウザー コンソールを使用して、これらの例を簡単に試すことができます。

構文：

window.sessionStorage

上記のシナリオでは、セッション ストレージは空です。 したがって、返される Storage オブジェクトの長さはゼロです。

ご存知のように、window オブジェクトはグローバル オブジェクトです。 したがって、Storage オブジェクトを返す sessionStorage プロパティに直接アクセスできます。

sessionStorage

そのオブジェクトは、セッション ストレージからデータ項目を追加、変更、および削除するために使用されます。

覚えておくべき重要なことは、セッション ストレージは読み込まれたページのプロトコルに依存するということです。 したがって、HTTP と HTTPS を介してアクセスした場合、同じ URL のセッション ストレージは異なります。

簡単に言うと、HTTP ページと HTTPS ページ用に 2つの個別のセッション ストレージ スペースを作成します。

window.sessionStorage オブジェクトは Storage オブジェクトから派生するため、セッション ストレージ スペースを操作するために必要なすべてのメソッドを継承します。

データ項目をセッション ストレージに追加する

上記のように、以下に示すように、Storage オブジェクトの setItem() メソッドを使用して、新しいデータ項目をセッション ストレージ スペースに追加できます。

window.sessionStorage.setItem('userVisitCount', 20);
window.sessionStorage.setItem('userBlockCount', 2);

出力：

上記のコマンドは、userVisitCount と userBlockCount という名前の 2つのデータ項目を設定する必要があります。 Storage オブジェクトがどのように見えるかを確認しましょう。

ブラウザーの開発者ツールを使用して、セッション ストレージを簡単に確認できます。 Chrome で開発者ツールを開き、[アプリケーション] タブを見つけます。

ウィンドウの左側に、次のようにセッション ストレージ セクションが表示されます。

提供されたキーのアイテム値を取得する

Storage オブジェクトの getItem メソッドを使用して、指定した項目キーの値を照会できます。

window.sessionStorage.getItem('userVisitCount');

出力：

予想通り、getItem() メソッドは userVisitCount の値である 20 を返しました。

セッションストレージからアイテムを削除

setItem() および getItem() と同じパターンに従って、セッション ストレージからアイテムを削除する removeItem() メソッドを取得しました。 userVisitCount キーに関連付けられたアイテムを削除しましょう。

window.sessionStorage.removeItem('userVisitCount');

出力：

Storage オブジェクトをもう一度調べてみましょう。

ご覧のとおり、セッション ストレージで使用できるアイテムは 1つだけで、userVisitCount キーはもうありません。

さらに、clear() メソッドを呼び出すことで、セッション ストレージをクリアできます。 これにより、Storage オブジェクトのすべてのエントリが削除されます。

window.sessionStorage.clear();

予想どおり、すべてのエントリがセッション ストレージから削除されました。 このコマンドは、ショッピング カートなど、Web アプリケーションの状態を保持し、同じブラウザ ウィンドウ/タブ内のページ間でデータを渡す必要があるアプリケーションで非常に役立ちます。