2016.12.12
2017.4.17

ng-repeatで利用した配列データをストレージに保存する際の注意点

ng-repeatで利用した配列データをJSON.stringify()で変換してからlocalStorage(またはsessionStorage)に保存した後、保存したデータを読み込んでJSON.parse()してから利用しようとしたらデータは取得できるのに、画面に表示されないといったことがありました。

原因はJSON.stringify()でng-repeatで利用した配列データを変換すると「$hashkey」という勝手に追加されたデータも変換されてしまい、そのデータを読み込むとエラーになってしまうためです。この「$hashkey」がなにに利用されているのか不明ですが、変換時に削除しなければいけません。

最初はJSON.stringify()を行う前にangular.copy()を使って省いていたのですが、こちらの情報によると、angular.toJson()で$hashkeyを除いて直接変換できるようなので、できればこちらを使っていきましょう。


$scope.list = [{aaa : 1, bbb : 1, ccc : 1}, {aaa : 2, bbb : 2, ccc : 2}];
localStorage.setItem(angular.toJson($scope.list));

今回の問題は、以前にも同じことがあって調べて解決したことがあるのですが、完全に忘れていました。プログラミングってずっと同じ言語もしくはフレームワークを利用していないとほんと忘れやすいですね。

参考リンク

AngularJS】関連記事