AngularJSでlocalStorageを使う

ANGULAR MODULESでlocalStorageで検索すると、最も使っている人が多い ngStorage を使ってみました。READMEの通りですが、メモっておきます。

• Install

$ bower install ngstorage

• moduleにngStorageへの依存を貼ります

module

var app = angular.module('starter.controllers', ['ngStorage'])

• controllerにサービスを読み込む
  SessionStorageなら$sessionStorage
  LoalStorageなら$localStorage

• localStorageを読み込む
  例えば、isEnableHogeとpositionXHogeを読み込む場合。

Load

$scope.$storage = $localStorage.$default({
            isEnableHoge: false,
   			 positionXHoge: 10
});

default()で設定しておけば、localStorageに実データがない場合はデフォルト値を使い、存在する場合はその値を使う。（helpには説明が書いてないけど、私の試した範囲だとそうなりました。）default()は使った方がいいと思います。

• localStorageへの保存

Save

       $scope.$storage.isEnableHoge = true; 
       $scope.$storage.positionXHoge = 34;

簡単です。
最後にionicと組み合わせるとこんな感じでLoadすれば、アプリケーションの設定データとして使えます。

var app = angular.module('hoge', ['ngStorage'])

app.controller('AppCtrl', function($scope, $ionicPlatform
  $ionicPlatform.ready(function() {
		$scope.$storage = $localStorage.$default({
            isEnableHoge: false,
            positionXHoge: 10
	});
));