AngularJS Experiment: Store content locally, within localStorage

<!DOCTYPE html>
<html>

<head>
  <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="ngStorage.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="NotesApp" ng-controller="NotesCtrl">
  <h1>Notes Vault</h1>


  <select ng-model="savedNote" ng-options="n.title for n in $storage.notes" id="selectedNote">
    <option value="">-- Saved Notes --</option>
  </select>

  <button data-ng-click="removeItem()">Delete Selected Note</button>

  <button data-ng-click="cloneItem()">Clone Selected Note</button>

  <button data-ng-click="addItem()">Create New Note</button>

  <input style="width:100%;" type="text" ng-model="savedNote.title" id="title">

  <textarea style="width:100%;height:100px;" ng-model="savedNote.content" id="content"></textarea>
</body>

</html>

// The module
var NotesApp = angular.module('NotesApp', ['ngStorage']);

// The controller
NotesApp.controller('NotesCtrl', function($scope, $localStorage) {
  // Set a default
  $scope.$storage = $localStorage.$default({
    "notes": [{
      "title": "What is the notes vault?",
      "content": "It is an AngularJS experiment, done by Joe Steinbring.  I think it is fairly cool."
    }, {
      "title": "Things Joe blogs about",
      "content": "- Movies\n- Photography\n- Coding"
    }]
  });
  $scope.removeItem = function() {
    $scope.$storage.notes.splice(document.getElementById('selectedNote').value, 1);
    document.getElementById('title').value = '';
    document.getElementById('content').value = '';
  }
  $scope.addItem = function() {
    $scope.$storage.notes.push({
      "title": "",
      "content": ""
    });
  }
  $scope.cloneItem = function() {
    $scope.$storage.notes.push({
      "title": document.getElementById('title').value,
      "content": document.getElementById('content').value
    });
  }
});

/* Styles go here */

# Notes Vault #
## An experiment in AngularJS ##

***What is this?***  It is an experiment into how to use the ngStorage AngularJS module as a way of easily storing data within localStorage.

For more info on ngStorage:

[GitHub Page](https://github.com/gsklee/ngStorage)

[ngModules Page](http://ngmodules.org/modules/ngStorage)

For more info on textAngular:

[textAngular Page](http://textangular.com/)

***Who am I?***  I am Joe Steinbring.  I am a coder from Milwaukee, WI.  You can find me at http://steinbring.net.

'use strict';

(function() {

    /**
     * @ngdoc overview
     * @name ngStorage
     */

    angular.module('ngStorage', []).

    /**
     * @ngdoc object
     * @name ngStorage.$localStorage
     * @requires $rootScope
     * @requires $window
     */

    factory('$localStorage', _storageFactory('localStorage')).

    /**
     * @ngdoc object
     * @name ngStorage.$sessionStorage
     * @requires $rootScope
     * @requires $window
     */

    factory('$sessionStorage', _storageFactory('sessionStorage'));

    function _storageFactory(storageType) {
        return [
            '$rootScope',
            '$window',
            '$log',

            function(
                $rootScope,
                $window,
                $log
            ){
                // #9: Assign a placeholder object if Web Storage is unavailable to prevent breaking the entire AngularJS app
                var webStorage = $window[storageType] || ($log.warn('This browser does not support Web Storage!'), {}),
                    $storage = {
                        $default: function(items) {
                            for (var k in items) {
                                angular.isDefined($storage[k]) || ($storage[k] = items[k]);
                            }

                            return $storage;
                        },
                        $reset: function(items) {
                            for (var k in $storage) {
                                '$' === k[0] || delete $storage[k];
                            }

                            return $storage.$default(items);
                        }
                    },
                    _last$storage,
                    _debounce;

                for (var i = 0, k; i < webStorage.length; i++) {
                    // #8, #10: `webStorage.key(i)` may be an empty string (or throw an exception in IE9 if `webStorage` is empty)
                    (k = webStorage.key(i)) && 'ngStorage-' === k.slice(0, 10) && ($storage[k.slice(10)] = angular.fromJson(webStorage.getItem(k)));
                }

                _last$storage = angular.copy($storage);

                $rootScope.$watch(function() {
                    _debounce || (_debounce = setTimeout(function() {
                        _debounce = null;

                        if (!angular.equals($storage, _last$storage)) {
                            angular.forEach($storage, function(v, k) {
                                angular.isDefined(v) && '$' !== k[0] && webStorage.setItem('ngStorage-' + k, angular.toJson(v));

                                delete _last$storage[k];
                            });

                            for (var k in _last$storage) {
                                webStorage.removeItem('ngStorage-' + k);
                            }

                            _last$storage = angular.copy($storage);
                        }
                    }, 100));
                });

                // #6: Use `$window.addEventListener` instead of `angular.element` to avoid the jQuery-specific `event.originalEvent`
                'localStorage' === storageType && $window.addEventListener && $window.addEventListener('storage', function(event) {
                    if ('ngStorage-' === event.key.slice(0, 10)) {
                        event.newValue ? $storage[event.key.slice(10)] = angular.fromJson(event.newValue) : delete $storage[event.key.slice(10)];

                        _last$storage = angular.copy($storage);

                        $rootScope.$apply();
                    }
                });

                return $storage;
            }
        ];
    }

})();