[Javascript]localstorageがきちんと挙動しない

Question

*事象
あるサイトでページ①で連想配列のリストをlocalstorageに格納し、次のページ（ページ②）に遷移した際、格納した値を取り出すJavascriptを書いたのですが、全アクセスの60%くらいの割合で値がnullで返ってきます。

*実際のコード
ページ①
localStorage.setItem("samplearray", JSON.stringify(samplearray));
ページ②
var result = JSON.parse(localStorage.getItem("samplearray"));

*確認したこと
・格納するsamplearrayには確実に1つ以上のオブジェクトが入っている
・ユーザー環境によりlocalstorageが使えないかどうかの確認を行なった結果、localstorageが使えない環境だったユーザーは1%未満であり、localstorageが使えるユーザーでもresultがnullで返ってきた

localstorageがうまく動かない時の理由、可能性について教えてもらえると幸いです。
情報が不足している場合は、コメントください。

Answer 1

localStorage に限らず、サイトデータは記録可能なサイズ上限があります。

ちょっと古い情報ですが
モダンブラウザのストレージ容量まとめ 2014-01-28

コードが問題ない場合、「オリジンごとに定められた保存サイズ上限」を疑うべきでしょう。

---

追記）サイズに関しては的はずれに感じましたので、その他に原因がないか思い起こしてみました。

localStorageは基本的に同期処理ですし、ページ間で同期を取る遅延が発生している可能性もあります。
この遅延に関してlocalStorage以降で登場した IndexedDBでは複数のタブで開いていて、いずれかのページでDB更新があると、他のタブと同期を取るAPI（コードを組む必要がありますが）もあるくらいです。

localStorage でも発生していたからこそ、IndexedDBでは同期を取るAPIが付与されたのではないでしょうか。
ブラウザの操作を少し待ってみて値が得られるかどうかをチェックし、意図したとおりの挙動なら、端末操作を敢えて待たせるように実装する方法がありそうです。

Comments

[VeryBeginner]

ご回答ありがとうございます。
記録可能なサイズに関して、localstorageのデータのクリアをして試して見たいと思います。
呼び出しのタイミングに関して、setIntervalでsetItemとgetItemを繰り返すことで回避できますでしょうか？

[AkitoshiManabe]

データサイズに関しては、localStorage.setItem() 実行時にエラーを発してくれると思いまして、的外れな回答と感じた次第です。
呼び出しタイミングに関しては、間隔をあけると機能すると思いますので setTimeout() / setInterval() でも良いと思います。
ただ、読み書きが同期的ですのでインターバルで回すとだんだんと重くなるかもしれません。
頻繁に読み書きするよりも、滅多に発生しないイベントをトリガに読み書きしたほうがいいと思います。
ちなみに、「次のページに移動して取得」という場合は、必ず windowのonload 以降で実装しましょう。DOMContentLoaded だと、動かない機能も多数あります。

[VeryBeginner]

詳細な説明ありがとうございます。setTimeoutで対応しました！