sessionStorageで保存する値が文字列になる

sessionStorageで真偽値を保存した時に、文字列に変換されてしまっているようだったのでメモしておきます。

サンプルコード

1回目のアクセスではsessionStorageに値を保存していないのでnullが、2回目以降はsessionStorageに保存した値がconsoleに表示されるようにします。
合わせて、保存されている値の型もconsoleで表示します。

JavaScript

var flag = sessionStorage.getItem('flag');
console.log(flag);
console.log(typeof flag);

// sessionStorageに保存されていない場合
if(flag === null) {
	try {
		sessionStorage.setItem('flag', true);
	} catch(e) {}
}

sessionStorageの値が文字列になるデモページ

1回目はconsoleに以下のように表示されました。

1回目

console.log(flag); // null
console.log(typeof flag); // object

2回目のconsoleは以下のようになりました。

2回目

console.log(flag); // true
console.log(typeof flag); // string

保存した値だけ見るとtrueが返っているので正しく保存されているように見えますが、型を確認すると本来booleanが返ってくるはずがstringが返ってきていました。

いくつか違う型でも試してみましたが、保存時に文字列になってしまうようです。

JavaScript

var flag = sessionStorage.getItem('flag');
console.log(flag);
console.log(typeof flag);

// sessionStorageに保存されていない場合
if(flag === null) {
	try {
		sessionStorage.setItem('flag', 2);
	} catch(e) {}
}

sessionStorageの値が文字列になるデモページ2

JavaScript

var flag = sessionStorage.getItem('flag');
console.log(flag);
console.log(typeof flag);

// sessionStorageに保存されていない場合
if(flag === null) {
	try {
		sessionStorage.setItem('flag', {
			'hoge': 'fuga'
		});
	} catch(e) {}
}

sessionStorageの値が文字列になるデモページ3

sessionStorageだけでなく、localStorageでも同様のようです。

JavaScript

var flag = localStorage.getItem('flag');
console.log(flag);
console.log(typeof flag);

// sessionStorageに保存されていない場合
if(flag === null) {
	try {
		localStorage.setItem('flag', true);
	} catch(e) {}
}

localStorageの値が文字列になるデモページ
　

【参考サイト】

• HTML5のsessionStorage、文字列に型変換されるから注意。 – DECKS開発につき。