JSFiddle - React, Tailwind, and code Playground

by Joe Steinbring

HTML

<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>

JavaScript

// ------------------------------------------------------------------------------
// START: ngStorage Module
// ------------------------------------------------------------------------------

'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++) {
                   ...