angular.jsでlocalstorageを使う方法

angularjs

やりたかったこと

corodovaで簡単なアプリ開発をしてて、アプリ使用時に設定した内容を記録しておいて次回起動時にそれを読込む仕組みを実装したかった。
今回は保存先としてhtml5で利用可能なローカルストレージ(localstorage)を使用する事にした。
そのプラグインの1つが「angularLocalStorage」なので今回はそれを利用します。

まずはプラグイン導入

bowerでインストール

./node_modules/bower/bin/bower install angularLocalStorage

angularLocalStorageにangular-cookiesも同時にダウンロードされます。
また、bowerとか使わずにgithubなどから直接ダウンロードして配置する形でもokです。

ちなみに僕は以下のページのようにbowerでインストール先を指定して使ってます
bowerでインストールしたライブラリをfuelphpで使う方法(メモ) - とりあえずphpとか

使ってみる

使い方は簡単で以下の形で使用できます。わかりやすいですね

htmlで読込み

<script src="js/lib/angular-cookies/angular-cookies.js"></script>
<script src="js/lib/angularLocalStorage/src/angularLocalStorage.js"></script>

javascript

var myApp = angular.module(
    "myApp",
    ["angularLocalStorage"]
);

myApp.controller("ControllerMain", function(strong) {
  //登録
  storage.save("key_name", value);
  // 取得
  storage.get("key_name");
});

まとめ

用途はたくさんあると思いますが。例えば
・ログインid、パスワードなどを記録しておいて自動でログインする機能
・リアルタイム性が不要なapiなどの情報を一定期間保持しておく
などいろいろありそうです、以上です