AngularJS の localStorage モジュール angularLocalStorage


AngularJS アプリケーションで localStorage を使うときに便利なモジュールの紹介。

agrublev/angularLocalStorage

機能

  • AngularJS の model と localStorage を双方向にバインド
  • オブジェクト、配列も変換不要
  • localStorage 非対応のブラウザでは $cookies にフォールバック(angular-cookies.min.js を参照し、ngCookiesを依存モジュールとして記述)

使い方

依存モジュールとしてlocalStorageを追加。

app.js
1
var yourApp = angular.module('yourApp', [..., 'angularLocalStorage']

controller にstorageを記述。

controllers.js
1
yourApp.controller('yourController', function($scope, storage) {

storageを使う。デフォルト値やキーを変更可能。

controllers.js
1
2
3
4
5
6
// storage.variable にバインド
storage.bind($scope,'varName');

// * defaultValue: デフォルト値
// * storeName: 変数名と異なる localStorage への保存 key を指定
storage.bind($scope, 'varName', {defaultValue: 'randomValue123', storeName: 'customStoreKey'});

これだけ。とにかく便利。