ちょっとハマったのでメモを残します。
今作っているアプリで、ローカルストレージにデータを保存できたらいいのかなと思って調べていたら、AngularJS側で使いやすいようにモジュール化されたのがありました。
その使い方の記事
AngularJS の localStorage モジュール angularLocalStorage
これでよさそうなのかなと思ったのですが、いまいち使い方がわからなかったので、試行錯誤していたところ、記事を書いていた本人に声をかけていただいて、疑問が解決したので、メモっておきます。
var yourApp = angular.module('yourApp', [..., 'angularLocalStorage']
yourApp.controller('yourController', function($scope, storage) {
// hogeをキーにしてlocalStorageに保存される
storage.bind($scope, 'hoge'); // 既存の変数を指定すると、$scope.varName になる。
console.log($scope.hoge); // => 空
// * defaultValue: デフォルト値。既に値があったら上書きしない。
// * storeName: storeNameをキーとしてlocalStorageに保存される
storage.bind($scope, 'piyo', {defaultValue: 'default', storeName: 'fuga'});
console.log($scope.piyo); // => 'default'
console.log(storage.get('fuga')); // => 'default'
// つまり$scope.piyo == storage.get('fuga');
storeNameを変えることで、1つのブラウザを複数ユーザーが使うときに値が上書きされるのを避けることができる、ということだそうです。
// userの属性は人それぞれ
var user = {email: 'hoge@example.com', name: 'hoge', age: 30};
storage.bind($scope, 'user', {storeName: user.email, defaultValue: user});
// しかし、扱う側は$scope.userを扱うだけでよい。
// storeNameを元にlocalStrageから値を取得して$scope.userとバインドしてくれる。
バインドが非常に簡単なので、管理も楽かなと思う。
やっとわかってきたー。
