动态将数据添加到JSON

Question

所以我想做的是将图片的dataUri存储在我的本地存储中。 我只使用javascript和angularJS。 目前没有jQuery。

图片是通过类型为“ file”的输入（其ID为“ input_file_0 ”等）上传的。

我可以将id和dataUri存储在$ scope.files变量中。 因此，如果我说console.log($scope.files); 我得到这样的输出：

$ scope.files

< [input_file_0:File, input_file_1:File, ...]
  length:0
  < input_file_0:File
       lastModified: 1457515898145
       lastModifiedDate: Wed Mar 09 2016 10:31:38 GMT+0100 
       name: "name-of-picture.png"
       size: 206156
       src:  "data:image/png;base64,iVBORw0K..."
       type: "image/png"

  > input_file_1:File

controller.js

/*
 * stores $scope-values for longer reference in the localStorage
 * @returns {undefined}
 */
    $scope.storeDataInLocalStorage = function () {
        if (typeof (localStorage) !== 'undefined') {
            //storing file data
            var data = {};
            for (var i = 0; i <= $scope.files.length; i++) {
                data.push({ 'file_input_'+i : $scope.files['file_input_'+i].src}) ;
            }
            localStorage.setItem('files', JSON.stringify(data));
        }
        /* No localstorage support */
        else {
            alert("Sorry. Localstorage is not supported");
        }
    };

---

我想实现这样的localStorage项：

localStorage.getItem('files') = 
{'input_file_0' : "data:image/png;base64,iVBORw0K...", 
 'input_file_1 : "data:image/png;base64,iVBORw0K..."}

但是设置密钥只是行不通的。 获得src属性就可以了。 但是用变量作为键是行不通的。 它总是只用变量名代替它。

---

Answer 1

我自己尝试解决了之前无法解决的问题，现在突然解决了。 也许已经在本地存储了一些东西，但我没有正确删除它。

这次我没有使用push，所以我的代码如下所示：

controller.js

/*
 * stores $scope-values for longer reference in the localStorage
 * @returns {undefined}
 */
    $scope.storeDataInLocalStorage = function () {
        if (typeof (localStorage) !== 'undefined') {
            //storing file data
            var data = {};
            for (var i = 0; i <= $scope.files.length; i++) {

                data['input_file_'+i]= $scope.data['input_file_'+i].src;

            }
            localStorage.setItem('files', JSON.stringify(data));
        }
        /* No localstorage support */
        else {
            alert("Sorry. Localstorage is not supported");
        }
    };

还是有人知道如何使用array.push()吗？

Answer 2

使用额外的对象在for循环中添加项目：

  var data = [];
  for (var i = 0; i <= $scope.files.length; i++) {
        var o = {};
        o[('file_input_' + i)] = $scope.files['file_input_'+i].src;
        data.push(o);
   }
  localStorage.setItem('files', JSON.stringify(data));