ローカルストレージに「入りきらなかったこと」は判定できますか？

Question

###実現したいこと
PHPからデカい値を取得しローカルストレージに入れるにあたって、その成否を判定したいです。

###発生している問題
値がデカいため入りきらなかったときは別の処理を行いたいのですが、「入りきらなかったこと」を判定する方法がわかりません。

###該当のソースコード
下記でPHPから取得します。dekaiがデカい値で、これが入ったかどうかを判定したいです。

function dekaiInsert(){
	$.ajax({ url:'http://example.com/ajax', type:'POST', data:{action:'dekaiAjax'} })
	.done(function( dekai ) {	
		localStorage.setItem( 'デカい値', dekai );	  
	});	
}

###試したこと
上の実行後に、「そのキーへアクセスできること」を判定すれば出来るかもと思い、下記hasLocalStorage()を試しました。

しかし「入りきらなかったこと」とは無関係なようで、入りきらなかった場合でもtrueが返ってしまいました。

$(window).on('load', function() {

	// デカい値を入れる
	dekaiInsert(); 
	
	// 入りきらなければfalseとしたいが、trueが返ってしまう
	var hantei = hasLocalStorage( 'デカい値' );
	console.log( '判定結果', hantei ); 

	// 「入りきらなかったこと」を判定して処理を分けたい
	if ( hantei ) {
		// 入りきったときの処理
	}else{
		// 入りきらなかったときの処理
	}
});

// 「そのキーへアクセスできること」を判定
function hasLocalStorage( checkKey ) {
	try {
		window.localStorage.setItem(checkKey, 1);
		window.localStorage.getItem(checkKey);
		return true;
	} catch(e) {
		return false;
	}
}

Comments

[y_waiwai]

そのでかい値というのは値がでかいものなんでしょうか
で、その入りきらなかった、というのはどういう現象のことを言ってるんでしょうか。
ちと質問文が意味不明です

[kasumisou]

「でかい値」というのは「値がでかいもの」です。「Aだけが１億文字」でもOKです。

「入りきらなかった」とは「ローカルストレージの容量以上にでかかったために、入りきらなかった」という現象のことです。１億文字は入りきらないですからね。

[y_waiwai]

値じゃなくて、サイズがでかいもの、なんですね

[y_waiwai]

で、入りきらなったとき、というのはそれはどういう値になるんでしょうか

[m.ts10806]

それぞれブラウザによって容量に上限があることはご存じでしょうか。
というか、そういう判定が必要なほどサイズがあるのでしたらLocalStorageは悪手です。

Answer 1

ぱっと思いついたものを記載します。
書き込み時に容量が多かった場合はQuotaExceededErrorが発生されるので、それをcatchすればよいと思います。
書き込みと判定を別処理にしたい場合は、Flagを使えばよいかと。

以下追記
容量を判定するにわかりやすいサイトを見つけました。
リンク内容
chromeのデベロッパーツールからソースコードを探してみてください。

Comments

[kasumisou]

ありがとうございます。

[kasumisou]

すみません、それはどう書きますか？？

[makosankibu]

書き込み時の処理(localStorage.setItem)をtry...catch文で囲めばいいんじゃないんですか?

[kasumisou]

質問のコードのことですよね？お時間あるときに具体的に書いていただけませんでしょうか。お手間取らせて申し訳ございません。

[makosankibu]

すみませんが、具体的に書きたくありません。
何故なら、kasumisouさんが記載したコードの中に私が回答したtry...catch文が正しく使用されていて、且、具体的な使用方法も明示したにもかかわらず私にコードを書かせようとしているということは、kasumisouさん自身が具体的なコードを書けない(質問文に記載しているコードを書く知識もないのにかかわらず自身が作成したかのように記載している)事を示しているからです。

そのような状態での質問は作業依頼、丸投げの質問といいます。
このサイトでも非推奨の質問とされていますし、私個人としても嫌な気持ちになるため、申し訳ありませんが、具体的には書けません。
これを機に自身のコードについてきちんと理解して頂きたいと強く思います。

[kasumisou]

うわ、いいです、いいです。ありがとうございました。

[makosankibu]

なるほど、あなたがどういう人か理解しました。
礼には及びません。

[kasumisou]

申し訳ございません。嫌な書き方をしてしまいました。お叱りありがとうございます。

Answer 2

既にベストアンサーがついていますが、makosankibuさんが指摘されているように、どのみち例外が発生するわけですから、try ～ catch を使わないと処理が継続できません。そして、どうせ try ～ catch を書くのであれば、わざわざサイズのチェックなどしなくても、catchの時点で「書き込めなかった」ことがわかります。

ということで、少なくとも try ～ catch は必須です。

それと、質問者さんはコードを動かしてみたのでしょうか。実際に大きなデータを入れてみれば、例外が発生することはすぐに分かると思います。

Answer 3

状況がよくわかりませんが一般的に
書き込んだものを呼び出して、サイズが違えば失敗じゃないでしょうか？

Comments

[kasumisou]

ありがとうございます。デカい値のサイズは都度異なるので、サイズを測るという方法は難しそうです。

[yambejp]

.done(function( dekai )でdekaiを得てるんですから
「サイズを測るという方法は難しそう」の意味がわかりません

localStorage.setItem( 'デカい値', dekai );
console.log(dekai.length==localStorage.getItem( 'デカい値').length);

[kasumisou]

失礼致しました。仰る通りでした。ありがとうございます。