using locallyjs for localstorage

app/pods/components/music-tab/component.js

@@ -293,7 +293,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
       this.get('kick').set(options);
     }
 
-    localStorage.setItem('huegasm.' + name, value);
+    this.get('storage').set('huegasm.' + name, value);
   },
 
   incrementElapseTime(){
@@ -310,7 +310,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
 
     songBeatPreferences[title] = {threshold: this.get('threshold'), decay: this.get('decay'), frequency: this.get('frequency') };
 
-    localStorage.setItem('huegasm.songBeatPreferences', JSON.stringify(songBeatPreferences));
+    this.get('storage').set('huegasm.songBeatPreferences', songBeatPreferences);
   },
 
   loadSongBeatPreferences() {
@@ -490,6 +490,7 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
     this._super();
 
     var dancer = new Dancer(),
+      storage = new window.Locally.Store({compress: true}),
       self = this,
       threshold = this.get('threshold'),
       decay = this.get('decay'),
@@ -505,6 +506,8 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
         }
       });
 
+    this.set('storage', storage);
+
     kick.on();
 
     dancer.bind('loaded', () => {
@@ -538,18 +541,8 @@ export default Em.Component.extend(musicControlMixin, visualizerMixin, {
     }
 
     ['volume', 'shuffle', 'repeat', 'volumeMuted', 'threshold', 'decay', 'frequency', 'speakerViewed', 'transitionTime', 'randomTransition', 'playerBottomDisplayed', 'onBeatBriAndColor', 'audioMode', 'dimmerEnabled', 'songBeatPreferences'].forEach(function (item) {
-      if (localStorage.getItem('huegasm.' + item)) {
-        var itemVal = localStorage.getItem('huegasm.' + item);
-
-        if (item === 'repeat' || item === 'volume' || item === 'decay' || item === 'threshold' || item === 'transitionTime' || item === 'audioMode') {
-          itemVal = Number(itemVal);
-        } else if(item === 'frequency') {
-          itemVal = itemVal.split(',').map(function(val){return Number(val);});
-        } else if(item === 'songBeatPreferences') {
-          itemVal = JSON.parse(itemVal);
-        } else {
-          itemVal = (itemVal === 'true');
-        }
+      if (storage.get('huegasm.' + item)) {
+        var itemVal = storage.get('huegasm.' + item);
 
         if(Em.isNone(self.actions[item+'Changed'])){
           self.set(item, itemVal);

app/pods/components/music-tab/mixins/music-tab.js

@@ -121,6 +121,7 @@ export default Em.Mixin.create({
   playing: false,
   fadeOutNotification: false,
   songBeatPreferences: {},
+  storage: null,
 
   speakerViewed: true,
   speakerLabel: function() {
@@ -260,12 +261,12 @@ export default Em.Mixin.create({
   }.observes('dimmerOn'),
 
   onSpeakerViewedChange: function(){
-    localStorage.setItem('huegasm.speakerViewed', this.get('speakerViewed'));
+    this.get('storage').set('huegasm.speakerViewed', this.get('speakerViewed'));
     this.get('beatHistory').clear();
   }.observes('speakerViewed'),
 
   onOptionChange: function(self, option){
-    localStorage.setItem('huegasm.' + option, this.get(option));
+    this.get('storage').set('huegasm.' + option, this.get(option));
   }.observes('randomTransition', 'onBeatBriAndColor'),
 
   onRepeatChange: function () {

bower.json

@@ -5,7 +5,7 @@
     "ember": "~2.0.2",
     "ember-cli-shims": "ember-cli/ember-cli-shims#0.0.3",
     "ember-cli-test-loader": "ember-cli-test-loader#0.1.3",
-    "ember-data": "~2.0.1",
+    "ember-data": "~2.1.0",
     "ember-load-initializers": "ember-cli/ember-load-initializers#0.1.5",
     "ember-qunit": "0.4.9",
     "ember-qunit-notifications": "0.0.7",
@@ -15,10 +15,11 @@
     "jquery": "~2.1.4",
     "jquery-mousewheel": "~3.1.13",
     "loader.js": "ember-cli/loader.js#3.2.0",
+    "locallyjs": "~0.3.1",
     "matchMedia": "~0.2.0",
     "nouislider": "^8.0.1",
     "qunit": "~1.18.0",
-    "three.js": "~0.71.0"
+    "three.js": "~0.72.0"
   },
   "resolutions": {
     "ember": "~2.0.2",

ember-cli-build.js

@@ -13,6 +13,7 @@ module.exports = function(defaults) {
   app.import('bower_components/JavaScript-ID3-Reader/dist/id3-minimized.js');
   app.import('bower_components/jquery-mousewheel/jquery.mousewheel.js');
   app.import('bower_components/three.js/three.js');
+  app.import('bower_components/locallyjs/dist/locally.min.js');
 
   // Use `app.import` to add additional libraries to the generated
   // output files.

package.json

@@ -25,18 +25,18 @@
     "ember-cli-babel": "^5.0.0",
     "ember-cli-content-security-policy": "0.4.0",
     "ember-cli-dependency-checker": "^1.0.0",
-    "ember-cli-htmlbars": "1.0.0",
+    "ember-cli-htmlbars": "1.0.1",
     "ember-cli-htmlbars-inline-precompile": "^0.3.0",
     "ember-cli-ic-ajax": "0.2.1",
     "ember-cli-inject-live-reload": "^1.3.0",
     "ember-cli-nouislider": "0.7.0",
     "ember-cli-qunit": "1.0.3",
-    "ember-cli-release": "0.2.6",
-    "ember-cli-sass": "4.2.0",
+    "ember-cli-release": "0.2.7",
+    "ember-cli-sass": "5.0.0",
     "ember-cli-sri": "^1.0.1",
     "ember-cli-uglify": "^1.0.1",
     "ember-cli-windows-addon": "^1.2.2",
-    "ember-data": "2.0.1",
+    "ember-data": "2.1.0",
     "ember-disable-proxy-controllers": "^1.0.0",
     "ember-export-application-global": "^1.0.3",
     "ember-modal-dialog": "0.8.1",