離子/角度：在本地存儲中讀取和寫入陣列

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。