目次

    sessionStorageとは

    sessionStorageは、Webページのセッションが続いている間、情報を保存しておけるブラウザの保存領域のようなものです。

    通常JavaScriptで保持されている変数などの情報は、ページを再読み込みするとリセットされますが、sessionStorageを使うことで、ページを閉じてもそのウィンドウ、もしくはタブを閉じない限り、情報を保持し続けることができます。

    例えば複数ページにわたるサイトのシステム構築の際、あるページでユーザーが入力した文字列などを別のページで取得して表示させたいなど、

    ページ遷移する際に、通信はしたくないけど前のページの情報を持っていたい場合などに使うことができます!


    sessionStorageの使い方

    sessionStorageはJavaScriptの組み込みオブジェクトであるため、特別なライブラリなどを読み込む必要はありません。

    保存するデータは、JavaScriptのオブジェクトのようにキーと値の組み合わせになっています。

    今回は、sessionStorageの使い方として「保存する」「取得する」「削除する」「初期化(全データの削除)」の4つを解説します。


    データを保存する

    データを連想配列のようにkeyとvalueのセットで保存します。

    データを保存するときはsetItemメソッドを使います。


    //sessionStorage.setItem('key','value');
    sessionStorage.setItem('name','スズキ');

    指定されたキーが存在しなければ新規に作成し、すでに存在していれば既存の値を上書きします。

    また、sessionStorageのデータの値には文字列のみ指定することができます。


    保存したデータを取得する

    データを取得するには、getItemメソッドの引数に取得したいデータのキーを指定します。


    //sessionStorage.getItem('key');

    sessionStorage.getItem('name');


    データを削除する

    sessionStorageに保存したデータを削除する時はremoveItemメソッドを使ってkeyを指定します。


    //sessionStorage.removeItem('key');

    sessionStorage.removeItem('name');


    保存したデータをすべて削除する

    sessionStorageに保存したデータを全て削除する時はclearメソッドを使います。


    sessionStorage.clear();


    応用編

    オブジェクトデータを保存し、取得する

    オブジェクトを一度文字列に変換してからsessionStorageに保存し、取得後にオブジェクトに戻すことで、オブジェクトでのデータのやり取りを実現しています。


    let data = {
     apple:りんご’,
     orange:みかん
    };
    //オブジェクトを文字列に変換
    let dataStr = JSON.stringify(data);
    sessionStorage.setItem(‘fruits’, dataStr);
    let fruits = sessionStorage.getItem(‘fruits’);
    //文字列をオブジェクトに変換
    let fruitsObj = JSON.parse(fruits);


    配列を保存し、取得する

    配列の場合はjoinメソッドを使って、配列をカンマ区切りの文字列に変換しています。

    取得した文字列はカンマ区切りなので、splitメソッドでカンマを区切り文字として配列にすることで、元の配列を復元できます。


    let data = [‘ぶどう’, ‘いちご’];

    //配列を文字列に変換
    let dataStr = data.join();
    sessionStorage.setItem(‘fruits’, dataStr);
    let fruits = sessionStorage.getItem(‘fruits’);
    //文字列を配列に変換
    let fruitsArr = animals.split(',');


    まとめ

    今回はsessionStorageについて解説ました。

    sessionStorageを使うと、サーバサイドを介さずにちょっとしたデータの保持をすぐに実装することができるため、フロント主体の開発など、色々な場面で役に立つのではないかと思います。

    最後までお読みいただきありがとうございました。



    PREV
    2022.02.10
    バンドワゴン効果とWEBサイト
    NEXT
    2022.02.10
    Material Youとは?