Ionic/Angular：在本地存储中读写数组

Posted 2023-03-05

【中文标题】Ionic/Angular：在本地存储中读写数组

【英文标题】：Ionic/Angular: Read and Write Array in Local Storage

【发布时间】：2016-09-03 08:03:40

【问题描述】：

我正在使用 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，它不起作用并给我一个错误。所以我需要检查密钥是否存在，如果不存在，那么它应该创建一个。我看过this的问题，但没有用，主要是我必须使用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);
        
    
])

这就是我现在所处的位置。我仍然被困住了。或者再次卡住。我不知道。

【参考方案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)
;

【讨论】：

使用这个，在清除我的本地存储后，我得到一个奇怪的错误，“未定义收藏夹”。所以我想我需要先创建一个空的本地存储条目？

是的，如果收藏夹不存在（您应该添加一个检查），您需要先创建它。

在哪里？你可以试试 $scope.favoriteData = $localStorage.favoriteData || /*默认对象*/;正如@muli yulzari 建议的那样

您正在混合两种不同的东西...您了解“if”或“try”块吗？您当前的代码是什么？你试过什么？到底哪里又失败了？

找到了。试试这第一行 $scope.favoriteData = $localStorage.getObject('favorites', []);我已经删除了字符串并默认返回数组。

【参考方案2】：

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

你可以打电话：

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

保存数据也是如此。使用 点 表示法。

检查demo。

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

注意：这里假设您使用 ngStorage。

【讨论】：

我用这个工厂来做这个，我觉得：.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); ])

这是不可读的。就用我给你的那个。它已经以角度方式编写了。

对代码带来的不便深表歉意。我贴的时候看起来还不错。而且我不认为我可以使用你的方法，我担心它会违反课程规范。我的意思是，我很欣赏你的工作，不要误会我的意思，只是如果我不处理我们在课程中处理的内容，给它评分的人可能会让我不及格。 :(

啊哈我不知道是那种课程。如果我能放下工作，我会更新我的答案。