【JavaScript】sessionStorageで一時的なデータを保存したり読み込んだり

JavaScriptでsessionStorageを使って一時的なデータを保存したり読み込んだりしたい！

概要

今回の記事では、JavaScriptでsessionStorageを使って一時的なデータを保存したり読み込んだりする手順を掲載する。

sessionStorageの特徴は下記のような感じ。

タブ毎のストレージ: sessionStorageは開いてるタブまたはウィンドウ毎にデータが保存される。異なるタブやウィンドウ間で共有されない。
データの持続性: ページのリロードやリストアでもデータが保持されるが、ブラウザを完全に閉じるとデータは消失する。
同一オリジンポリシー: 同じオリジン（プロトコル・ドメイン・ポート番号が同一であるということ）のドキュメント間でのみアクセスが許可される。
文字列ベースのストレージ: キーと値は両方とも文字列でなければならない。文字列しか使えない連想配列的な感じ。整数型などは文字列に変換してから保存する。
容量制限: ブラウザによるけど、大体は5MB程度の容量制限がある。

環境

Google Chrome 114.0.5735.199（Official Build）（64 ビット）

手順書

sessionStorageで一時的なデータを保存したり読み込んだりする例。

var id = "nya-n";

sessionStorage.setItem('id', id);

var result = sessionStorage.getItem('id')

consolo.log(result);

スクリプトを実行するとコンソールに下記のように表示される。

nya-n

もうちょっとそれっぽい例として下記の記事に掲載したページの再読み込みを判定して、再読込前に一時的なデータを保存して、ページの再読込後にデータを読み込んで画面を復元する的な例。

// ページが再読み込み（別のページに移動する際も呼び出される）などで遷移する前の処理
window.addEventListener('beforeunload', function () {
    sessionStorage.setItem('id', id);
});

// ページが再読み込みされた場合の処理
document.addEventListener('DOMContentLoaded', function () {
    if (performance.navigation.type === performance.navigation.TYPE_RELOAD) {
        id = sessionStorage.getItem('id');
        // 画面の復元などの処理
    }
});

使いそうなAPI。（他にもある）

// データを削除
sessionStorage.removeItem('id');

// 全てのデータを削除
sessionStorage.clear();

まとめ（感想文）

これもSPAで使えそうな感じかもね！