【js】SessionStorageでブラウザのセッションに値を格納

2019-09-01 10:38

「セッション」へ値を格納するメリットは、同じドメイン内でリンクをしていってもブラウザが閉じるまで、情報が保持されるところです。
顧客IDや、流入元などからwebページの内容を出し分けることが可能になります。

・SessionStorageへ格納する
・SessionStorageから値を引き出す
・応用編
をご紹介します。

SessionStorageへ格納する

sessionStorage['key'] = item;

上記で、セッションの「key」という箱に「item」を格納するという内容になります。「item」の内容はURLやパラメーターなど、取得した値を入れることができます。
様々な値の取得の参考記事はこちら▼
【js】URLで条件分岐(取得とif文の組み方)

SessionStorageから値を引き出す

sessionStorage.getItem("key");
//取得した値をもう一度格納するならこちら
var get_key = sessionStorage.getItem("key");

上記スクリプトで先ほど格納した値「key」=「item」が取得できます。
ここからさらにデータを加工し、もう一度セッションに格納し直すことも可能です。
格納したデータを破棄する時はこちら▼

sessionStorage.clear();

応用編(使用例)

今回の使用例はURLからパラメーターを取得し、仮想配列にした後、セッションに値を格納していきます。(なお、nullの場合は格納させません)

//-----------------------------------
//keyId=xxxxx を取得セッションへ格納
//-----------------------------------

var url_search = location.search.substr(1).split('&');
// パラメータ連想配列エリア初期化
var parameter = [];
// キーエリア初期化
var key = null;
for(var i = 0 ; i < url_search.length ; i++) {
	// "&"で分離したパラメータを"="で再分離
	key = url_search[i].split("=");
	// 「keyID=xxxxxx」をパラメータを連想配列でセット
	parameter[key[0]] = key[1];
}
//keyIDがnullではないとき
if( parameter["keyID"] != null){
	// session_keyIDに「keyID=xxxxxx」を格納
	sessionStorage['session_keyID'] = parameter["keyId"];
}
//keyIDを再取得consoleへ出力
var get_keyID = sessionStorage.getItem('session_keyID');
console.log(get_keyID);

いかがでしたでしょうか?
セッションを使うことで、ページ遷移をしても裏で情報を持ってくれるので、URLバーが綺麗なままなのも嬉しいところです。