add backup and recover function

js/app.js

@@ -366,8 +366,64 @@
       });
     };
 
+    $scope.backupMySettings = function() {
+      var items = {};
+      for ( var i = 0, len = localStorage.length; i < len; ++i ) {
+        var key =  localStorage.key(i);
+        var value = localStorage.getObject(key);
+        items[key] = value;
+      }
+
+      var result = JSON.stringify(items);
+      var url = 'data:application/json,' + result;
+      chrome.downloads.download({
+          url: url,
+          filename: 'listen1_backup.json'
+      });
+    }
+
+    $scope.importMySettings = function(event) {
+      console.log('start');
+      var fileObject = event.target.files[0];
+      if (fileObject == null ){
+        Notification.warning("请选择备份文件");
+        return;
+      }
+      var reader = new FileReader();
+      reader.onloadend = function(readerEvent) {
+        if (readerEvent.target.readyState == FileReader.DONE) {
+          var data_json = readerEvent.target.result;
+          // parse json
+          var data = null;
+          try{
+              data = JSON.parse(data_json);
+          }catch(e){
+          }
+          if(data == null) {
+            Notification.warning("备份文件格式错误，请重新选择");
+            return;
+          }
+          for ( var key in data) {
+            var value = data[key];
+            localStorage.setObject(key, value);
+          }
+          Notification.success("恢复我的歌单成功");
+        }
+      };
+      reader.readAsText(fileObject);
+    }
   }]);
 
+  app.directive('customOnChange', function() {
+    return {
+      restrict: 'A',
+      link: function (scope, element, attrs) {
+        var onChangeHandler = scope.$eval(attrs.customOnChange);
+        element.bind('change', onChangeHandler);
+      }
+    };
+  });
+
   app.controller('PlayController', ['$scope', '$timeout','$log',
     '$anchorScroll', '$location', 'angularPlayer', '$http',
     '$httpParamSerializerJQLike','$rootScope', 'Notification','loWeb',

listen1.html

@@ -220,6 +220,20 @@ <h3 class="masthead-brand" ng-click="showTag(2)">Listen 1</h3>
             <div ng-show="isDoubanLogin"> 豆瓣：<button class="btn btn-primary confirm-button" ng-click="showDialog(2)">已登录</button></div>
             <div ng-hide="isDoubanLogin"> 豆瓣：<button class="btn btn-primary confirm-button" ng-click="showDialog(2)">登录</button> </div>
           </div> -->
+          <div class="settings-title"><span>数据备份<span></div>
+          <div class="settings-content">
+            <p>重装插件或清除缓存数据会导致我的歌单数据丢失，强烈建议在这些操作前，备份我的歌单。</p>
+            <div>
+              <button class="btn btn-primary confirm-button" ng-click="backupMySettings()">下载备份文件</button>
+            </div>
+          </div>
+          <div class="settings-title"><span>数据恢复<span></div>
+            <div class="settings-content">
+              <p>选择备份文件，恢复我的歌单。注意：恢复我的歌单会覆盖现有的歌单。</p>
+            <label class="btn btn-warning" for="my-file-selector">
+              <input id="my-file-selector" type="file" style="display:none;" ng-model="myuploadfiles"  custom-on-change="importMySettings">上传备份文件
+            </label>
+          </div>
           <div class="settings-title"><span>关于<span></div>
           <div class="settings-content">
             <p> Listen 1 (Chrome Extension) 主页: <a href="https://github.com/listen1/listen1_chrome_extension" target="_blank"> https://github.com/listen1/listen1_chrome_extension </a> </p>

manifest.json

@@ -15,7 +15,7 @@
    },
    "manifest_version": 2,
    "name": "Listen 1",
-   "permissions": [ "notifications", "unlimitedStorage", "storage", "contextMenus", "tabs", "*://music.163.com/*", "*://*.xiami.com/*", "*://*.qq.com/*", "webRequest", "webRequestBlocking"],
+   "permissions": [ "notifications", "unlimitedStorage", "downloads", "storage", "contextMenus", "tabs", "*://music.163.com/*", "*://*.xiami.com/*", "*://*.qq.com/*", "webRequest", "webRequestBlocking"],
    "version": "1.0",
    "web_accessible_resources": [ "images/*" ]
 }