ホーム » Web API » JavaScript sessionStorage

JavaScript sessionStorage

要約: このチュートリアルでは、JavaScript sessionStorage を使用して、セッション限定でデータを格納する方法を学習します。

JavaScript sessionStorage の概要

sessionStorage オブジェクトは、セッション限定でデータを格納します。つまり、sessionStorage に格納されたデータは、ブラウザが閉じられると削除されます。

ページのセッションは、Web ブラウザが開かれている限り継続し、ページが更新されても維持されます。

新しいタブまたはウィンドウでページを開くと、Web ブラウザは新しいセッションを作成します。

同じ URL で複数のタブまたはウィンドウを開くと、Web ブラウザはタブまたはウィンドウごとに個別の sessionStorage を作成します。したがって、ある Web ブラウザのタブに格納されたデータは、別のタブではアクセスできません。

タブまたはウィンドウを閉じると、Web ブラウザはセッションを終了し、sessionStorage のデータを消去します。

sessionStorage に格納されたデータは、ページのプロトコルに固有です。たとえば、同じサイト javascripttutorial.net に http と https でアクセスすると、異なる sessionStorage が作成されます。

sessionStorage データはサーバーのセッションに関連付けられているため、ページがサーバーからリクエストされた場合にのみ利用可能になります。サーバーなしでローカルでページが実行されている場合、sessionStorage は利用できません。

sessionStorage は Storage 型のインスタンスであるため、Storage のメソッドを使用してデータを管理できます。

  • setItem(name, value) – name の値を設定します。
  • removeItem(name) – name で識別される名前と値のペアを削除します。
  • getItem(name) – 指定した name に対する値を取得します。
  • key(index) – 指定した数値位置の値の名前を取得します。
  • clear() – sessionStorage のすべての値を削除します。

JavaScript sessionStorage でデータを管理する

1) sessionStorage へのアクセス

sessionStorage にアクセスするには、window オブジェクトの sessionStorage プロパティを使用します。

window.sessionStorageCode language: JavaScript (javascript)

window は グローバルオブジェクト であるため、このように sessionStorage にアクセスできます。

sessionStorage

2) sessionStorage にデータを格納する

次のコードは、sessionStorage に名前と値のペアを格納します。

sessionStorage.setItem('mode','dark');Code language: JavaScript (javascript)

sessionStorage に mode という名前のアイテムが存在する場合、setItem() メソッドは既存のアイテムの値を dark に更新します。そうでない場合は、新しいアイテムを挿入します。

3) sessionStorage からデータを取得する

name でアイテムの値を取得するには、getItem() メソッドを使用します。次の例では、アイテム 'mode' の値を取得します。

const mode = sessionStorage.getItem('mode');
console.log(mode); // 'dark'Code language: JavaScript (javascript)

mode という名前のアイテムがない場合、getItem() メソッドは null を返します。

4) name でアイテムを削除する

name でアイテムを削除するには、removeItem() メソッドを使用します。次のコードは、'mode' という名前のアイテムを削除します。

sessionStorage.removeItem('mode');Code language: JavaScript (javascript)

5) すべてのアイテムを反復処理する

sessionStorage に格納されているすべてのアイテムを反復処理するには、次の手順に従います。

  • Object.keys() を使用して、sessionStorage オブジェクトのすべてのキーを取得します。
  • for...ofを使用してキーを反復処理し、キーからアイテムを取得します。

次のコードは手順を示しています。

let keys = Object.keys(sessionStorage);
for(let key of keys) {
  console.log(`${key}: ${sessionStorage.getItem(key)}`);
}Code language: JavaScript (javascript)

6) sessionStorage内のすべてのアイテムを削除する

sessionStorageに保存されているデータは、Webブラウザーのタブ/ウィンドウが閉じられると自動的に削除されます。

さらに、clear()メソッドを使用して、sessionStorageに保存されているすべてのデータをプログラムで削除できます。

sessionStorage.clear();Code language: CSS (css)

JavaScript sessionStorageの理由

sessionStorageには多くの実用的なアプリケーションがあります。注目すべき点を次に示します。j

  • sessionStorageを使用して、Webアプリケーションのユーザーインターフェイスの状態を保存できます。後で、ユーザーがページに戻ったときに、sessionStorageに保存されたユーザーインターフェイスを復元できます。
  • sessionStorageは、非表示の入力フィールドまたはURLパラメータを使用する代わりに、ページ間でデータを渡すことにも使用できます。

JavaScript sessionStorageアプリケーション

ユーザーがダークモードまたはライトモードを選択できる、シンプルなWebアプリケーションを作成します。デフォルトでは、ライトモードです。また、sessionStorageを使用して、ページが更新されたときのモードを記憶します。

ページを更新すると、sessionStorageに保存されているため、選択したモードが復元されます。

ただし、タブまたはウィンドウを閉じると、ページはデフォルトモードであるdarkモードにリセットされます。

1) プロジェクトのフォルダー構造を作成する

最初に、session-storageという名前の新しいフォルダーを作成します。session-storageフォルダーには、JavaScriptファイルとCSSファイルを格納するjsとcssという2つのサブフォルダーを作成します。

次に、sessionStorageフォルダーに新しいindex.htmlを、jsフォルダーにapp.jsファイルを作成し、cssフォルダーにstyle.cssファイルを作成します。

2) HTMLページを作成する

以下にindex.htmlページを示します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript sessionStorage Demo</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <h1>JavaScript sessionStorage Demo</h1>
        <p>Click the button to switch to the dark/light mode.</p>
        <p>Refresh the page to check if the mode is saved.</p>
        <a id="theme-switcher" class="btn"></a>
    </div>
    <script src="js/app.js"></script>
</body>

</html>Code language: HTML, XML (xml)

このindex.htmlファイルでは、style.cssをヘッドセクションに、app.jsをボディセクションに配置します。

ページにはいくつかの要素があります。最も重要なのは、id theme-switcherのボタンです。

3) app.jsファイルを作成する

最初に、butotnのラベルとして使用される2つの定数を宣言します。

const MOON = '🌙';
const SUN = '☀️';
Code language: JavaScript (javascript)

theme-switcherボタンのラベルには、ダークモードではSUN、ライトモードではMOONを使用します。

次に、ダーク、ライト、デフォルトのモードに3つの定数を宣言します。

const DARK_MODE = 'dark';
const LIGHT_MODE = 'light';
const DEFAULT_MODE = DARK_MODE;
Code language: JavaScript (javascript)

3番目に、querySelector()を使用してボタンtheme-switcherを選択します。

const btn = document.querySelector('#theme-switcher');Code language: JavaScript (javascript)

4番目に、モードを変更する新しい関数setMode()を定義します。

function setMode(mode = DEFAULT_MODE) {
    if (mode === DARK_MODE) {
        btn.textContent = SUN;
        document.body.classList.add(DARK_MODE);

    } else if (mode === LIGHT_MODE) {
        btn.textContent = MOON;
        document.body.classList.remove(DARK_MODE);
    }
}Code language: JavaScript (javascript)

ダークモードでは、setMode()はボタンをSUNに変更し、ボディ要素にDARK_MODEクラスを追加します。

また、ライトモードでは、setMode()はボタンラベルをMOONに変更し、ボディ要素からDARK_MODEクラスを削除します。

以下にライトモードのCSSを示します。背景色は白で、文字色は黒です。


body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 16px;
    background-color: #fff;
    color: #333;
    line-height: 1.7;
    transition: 0.2s ease-in-out;
    padding: 20px;
}Code language: CSS (css)

ダークモードでは、背景色は黒で、文字色は白です。

.dark {
    background-color: black;
    color: #fff;
}Code language: CSS (css)

ライトモードからダークモードに切り替えるには、.darkクラスをボディ要素に追加し、その逆を行います。

5番目に、ページが読み込まれたときに実行されるinit()関数を定義します。

function init() {
    let storedMode = sessionStorage.getItem('mode');
    if (!storedMode) {
        storedMode = DEFAULT_MODE;
        sessionStorage.setItem('mode', DEFAULT_MODE);
    }
    setMode(storedMode);
}
Code language: JavaScript (javascript)

この関数では、getItem()メソッドを使用してsessionStorageに保存されているモードを取得します。

sessionStorageにmodeアイテムがない場合、init()関数はページをデフォルトモードであるダークモードに切り替えます。それ以外の場合、sessionStorageに保存されているモードに設定されます。

6番目、theme-switcher ボタンにクリックイベントハンドラをアタッチします

btn.addEventListener('click', function () {
    let mode = sessionStorage.getItem('mode');
    if (mode) {
        let newMode = mode == DARK_MODE ? LIGHT_MODE : DARK_MODE;
        setMode(newMode);
        sessionStorage.setItem('mode', newMode);
    }
});Code language: JavaScript (javascript)

クリックイベントハンドラは、`sessionStorage` に格納されたモードを取得します。

モードアイテムが存在する場合、モードを切り替えます。言い換えれば、ライトモードがダークモードになり、その逆になります。

次に、`setItem()` メソッドを使用して、`sessionStorage` のモードアイテムを新しいモードに更新します。

以下は完全な app.js ファイルです

const MOON = '🌙';
const SUN = '☀️';
const DARK_MODE = 'dark';
const LIGHT_MODE = 'light';
const DEFAULT_MODE = DARK_MODE;

const btn = document.querySelector('#theme-switcher');

init();

function init() {
    let storedMode = sessionStorage.getItem('mode');
    if (!storedMode) {
        storedMode = DEFAULT_MODE;
        sessionStorage.setItem('mode', DEFAULT_MODE);
    }
    setMode(storedMode);
}

function setMode(mode = DEFAULT_MODE) {
    if (mode === DARK_MODE) {
        btn.textContent = SUN;
        document.body.classList.add(DARK_MODE);

    } else if (mode === LIGHT_MODE) {
        btn.textContent = MOON;
        document.body.classList.remove(DARK_MODE);
    }
}

btn.addEventListener('click', function () {
    let mode = sessionStorage.getItem('mode');
    if (mode) {
        let newMode = mode == DARK_MODE ? LIGHT_MODE : DARK_MODE;
        setMode(newMode);
        sessionStorage.setItem('mode', newMode);
    }
});Code language: JavaScript (javascript)

以下が最終的なアプリケーションです.

最初に、ライトモードなどのモードを選択すると、`sessionStorage` に保存されます。

次に、ページを更新します。以前選択したモードが表示されます。

Web ブラウザのセッション ストレージに格納されているデータを表示するには、アプリケーション タブをクリックしてセッション ストレージを選択します

サマリー

  • `sessionStorage` を使用すると、セッションのみにデータを格納できます。ブラウザのタブまたはウィンドウを閉じると、ブラウザは `sessionStorage` データを削除します。
  • `sessionStorage` は `Storage` 型のインスタンスであるため、`Storage` 型のメソッドを使用して `sessionStorage` のデータを管理できます。
このチュートリアルは役に立ちましたか？
JavaScript localStorage
前回
JavaScript localStorage
次
JavaScript IndexedDB
JavaScript IndexedDB