JavaScriptでブラウザのsessionに値を格納・抽出(取得)・削除する方法

JavaScript

session操作に関する構文

// session 格納
window.sessionStorage.setItem(['KEY'],['VALUE']);

// session VALUEの取得
window.sessionStorage.getItem(['KEY']);

// 指定session(KEYに基づく)の削除
window.sessionStorage.removeItem(['KEY']);

// 全session 削除
window.sessionStorage.clear();

// sessionの数を取得
window.sessionStorage.length;

サンプル

/* キー */
const key01 = 'key-1'; 
const key02 = 'key-2';
/* 値 */
const val01 = 'val-1';
const val02 = 'val-2'; // 後々文字列を変更したときのために定数で一か所で管理しています

window.sessionStorage.setItem([key01],[val01]); // 「'key-1':'val-1'」をセッションにセット
window.sessionStorage.setItem([key02],[val02]); // 「'key-2':'val-2'」をセッションにセット

var a = window.sessionStorage.getItem([key01]); // キーkey-1をもつセッションの値を取得
console.log(a);    // 出力:val-1

window.sessionStorage.removeItem([key01]); // キーkey-1をもつセッションを削除(1)
a = window.sessionStorage.getItem([key01]);
console.log(a);   // 出力:null // (1)で削除してしまったのでnullが返る

window.sessionStorage.clear(); // セッションを全削除(2)
var b = window.sessionStorage.getItem([key02]);
console.log(b);   // 出力:null // (2)で削除してしまったのでnullが返る

var size = window.sessionStorage.length
console.log(size);  // 出力:0 // (2)で削除してしまったのでセッションは空

まとめ

セッションをコントロールする時は、まずwindowオブジェクトから書き始めるのはすべての操作に共通ですね。さらにwindow.sessionStorageまで覚えてしまえばかなり実地で使えるようになります。何も調べなくてもすらすらかけるようになるはずです。

window.sessionStorage.setItem()window.sessionStorage.getItem()window.sessionStorage.removeItem()window.sessionStorage.clear()window.sessionStorage.length、この5つをマスターしてしまえば何もむつかしいことはありません。

他のサーバーサイド言語と違ってsession_start(PHP)などを宣言する必要もないのでかなり楽な部類に入るかと思います。

ブラウザを更新すると格納したsessionが消えてしまって永続しない場合

補足ですが、稀にwindow.sessionStorage.setItem(['key-sample'],['value-samle']);のようにセッションにペアを格納したはずなのに、ブラウザの更新で消えてしまうことがあります。

その場合は、まずバックエンドの処理にセッションを操作して初期化していたりすることがあるので真っ先に疑ってみてください。プレーンなHTMLでの検証では100%上手くいくはずなので、JSPやPHPがからんでしまっている場合が多いです。

sessionはフロントでもバックエンドでも共有して利用していることに注意してください。

タイトルとURLをコピーしました