离子/角度：在本地存储中读取和写入阵列

Question

我正在使用Ionic框架，这是我学习AngularJS和许多其他对Web开发人员有用的工具的在线课程的一部分。 而且，作为一种高级的初学者类型，我陷入了困境。 在本单元中，我们学习了利用本地存储在本地持久化数据，以便即使在应用程序关闭后也可以获取我们喜欢的物品。 但是，我很难使它起作用。

所以这是我所做的：

失败的尝试

我可以将数据放入本地存储。 而且我可以追加数据。 我使用以下功能执行此操作：

$scope.favoriteData = $localStorage.getObject('favorites', '[]');

$scope.addFavorite = function (index) {
    console.log('Current Favorites', $scope.favoriteData);
    $scope.favoriteData =  Object.keys($scope.favoriteData).map(function(k) { return $scope.favoriteData[k] });
    console.log ($scope.favoriteData);
    $scope.storeVar = $scope.favoriteData.push("'{id':" + index + '},');
    console.log ($scope.favoriteData);
    $localStorage.storeObject('favorites', $scope.favoriteData);
    console.log('Added Favorite', $scope.favoriteData)
};

在本地存储中，将产生以下条目：

favorites: ["'{id':0},","'{id':1},"]

到目前为止，一切都很好。 但是，这是没有用的。 因为我需要此对象具有以下格式：

favorites: [{'id':0}, {'id':1}]

等等。 另外，我不应该添加重复项。 我在别处有一种功能，但是我对如何将这两个功能结合在一起仍然心存疑虑。

我拥有的功能是这样的：

function (index) {
        for (var i = 0; i < favorites.length; i++) {
            if (favorites[i].id == index)
                return;
        }
        favorites.push({
            id: index
        });
    };

问题是，我不知道它是如何工作的。

所以请帮忙？

编辑＃1：

第二次尝试

在@Muli和@ It-Z的帮助下，我现在正在使用以下代码：

$scope.favoriteData = $localStorage.getObject('favorites', '[]');

$scope.addFavorite = function (index) {
    console.log('Current Favorites', $scope.favoriteData);
    $scope.favoriteData =  Object.keys($scope.favoriteData).map(function(k) { return $scope.favoriteData[k] });
    console.log ($scope.favoriteData);
    for (var i = 0; i < favorites.length; i++) {
        if (favorites[i].id == index) {
            console.log ("Found duplicate id " + favorites[i].id);
            return;
        }
    }
    $scope.storeVar = $scope.favoriteData.push({id: index});
    console.log ($scope.favoriteData);
    $localStorage.storeObject('favorites', $scope.favoriteData);
    console.log('Added Favorite', $scope.favoriteData)
};

但是，这不起作用，因为对于不存在的键favorites ，它不起作用并给我一个错误。 因此，我需要检查密钥是否存在，如果不存在，则应该创建一个。 我已经看了这个问题，但是它没有用，主要是因为我必须在services.js使用以下工厂来访问本地存储：

.factory('$localStorage', ['$window', function ($window) {
    return {
        store: function (key, value) {
            $window.localStorage[key] = value;
        },
        get: function (key, defaultValue) {
            return $window.localStorage[key] || defaultValue;
        },
        storeObject: function (key, value) {
            $window.localStorage[key] = JSON.stringify(value);
        },
        getObject: function (key, defaultValue) {
            return JSON.parse($window.localStorage[key] || defaultValue);
        }
    }
}])

所以这就是我现在的位置。 而且我仍然被困住。 或再次卡住。 我不知道。

Answer 1

首先，这行：

$scope.storeVar = $scope.favoriteData.push("'{id':" + index + '},');

应该：

$scope.storeVar = $scope.favoriteData.push({id: index});

这是因为在原始行中，您在需要对象时将字符串推入favoriteData 。

而且，如果您想先检查是否有重复项，可以使用以下方法：

$scope.favoriteData = $localStorage.getObject('favorites', []);

$scope.addFavorite = function (index) {
    console.log('Current Favorites', $scope.favoriteData);
    $scope.favoriteData =  Object.keys($scope.favoriteData).map(function(k) { return $scope.favoriteData[k] });
    console.log ($scope.favoriteData);
    for (var i = 0; i < favorites.length; i++) {
        if (favorites[i].id == index) {
            console.log ("Found duplicate id " + favorites[i].id);
            return;
        }
    }
    $scope.storeVar = $scope.favoriteData.push({id: index});
    console.log ($scope.favoriteData);
    $localStorage.storeObject('favorites', $scope.favoriteData);
    console.log('Added Favorite', $scope.favoriteData)
};

Answer 2

$ localStorage为您处理序列化和反序列化，因此不需要$scope.favoriteData = $localStorage.getObject('favorites', '[]');

您可以致电：

$scope.favoriteData = $localStorage.favoriteData || {/*Defaults object*/};

保存数据也一样。 使用点符号。

检查演示 。

至于重复项：只需像平常一样自己处理即可。 完成后，调用$localStorage.mySet = modifiedSet （修改后的集合是标准JS对象）。

注意：这假设您使用ngStorage。