$localStroage数组没有't匹配$scope数组

$localStroage array doesn't match $scope array

本文关键字：数组 scope 匹配 localStroage      更新时间：2023-09-26

我正在将对象推送到$localStorage数组以实现持久性。在添加/删除对象之前，我还检查了这个数组以查看对象是否存在（如果存在，则应为splice；如果不存在，则为push）。

当我刷新页面时，$localStorage返回的数据似乎与预刷新时不同，因为我的检查功能不起作用，尽管在检查时看起来完全相同。

被推送的对象的结构如下：

    {
    "createdAt": "2015-04-24T10:21:21.649Z",
    "difficulty": "Hard",
    "exerciseDescription": "Lie on your back on a bench and take hold",
    "exerciseID": "3101",
    "exerciseName": "Bench Press",
    "images": [8679, 8680, 8682],
    "tags": ["Barbell", "Horizontal Flexion", "Extension", "Strength", "Chest", "Triceps", "Shoulder", "Elbow, Wrist & Hand"],
    "updatedAt": "2015-09-09T20:14:59.681Z",
    "words": ["bench", "press", "chest"],
    "objectID": "ak6t7ukQdY",
    "_highlightResult": {
        "exerciseName": {
            "value": "Bench Press",
            "matchLevel": "none",
            "matchedWords": []
        }
    }
}

检查对象是否存在（切换添加/删除）

$scope.addExerciseToProgramme = function(exercise) {
    if (!$localStorage.Programme) {
        $localStorage.Programme = [];
    }
    var index = $localStorage.Programme.indexOf(exercise);
    if (index > -1) {
        $localStorage.Programme.splice(index, 1);
    } else {
        $localStorage.Programme.push(exercise);
    }
}

监视/加载$localStorage的功能

$scope.$watch(function() {
    return $localStorage.Programme
}, function(programme) {
    $scope.programme = programme;
});

ng类检查锻炼是否在计划中

  <i class="exercise-add-indicator ion-ios-checkmark-outline" ng-class="{'orange': programme.indexOf(exercise) > -1}"></i>

问题

这有两个问题：

  1. 刷新后，ng-class不会根据我的$scope.programme 的内容有条件地添加类

  2. addExerciseToProgramme函数不尊重indexOf检查，并将练习对象推送到数组！

Array.prototype.indexOf()使用严格相等：只有当操作数引用同一Object时，比较Object的表达式才为true

使用localStorage时不应该使用此选项。

将对象保存到localStorage时，它会变成一个字符串。当检索到它时，它又变成了一个对象。

然而，这将是一个新的对象，即使它看起来完全相同。

例如，这将产生false:

var object1 = { id: 1 };
var object2 = { id: 1 };
console.log(object1 === object2);

为了使它发挥作用，您可以实现一个自定义函数，该函数根据您选择的属性的值检索索引。请注意，它应该是唯一的。

例如：

$scope.getExerciseIndex = function(exercise) {
  var index = -1;
  if (!$scope.programme) return index;
  for (var i = 0; i < $scope.programme.length; i++) {
    if ($scope.programme[i].exerciseID !== exercise.exerciseID) continue;
    index = i;
    break;
  }
  return index;
};
$scope.exerciseExists = function(exercise) {
  var index = $scope.getExerciseIndex(exercise);
  return index > -1;
};
$scope.addExerciseToProgramme = function(exercise) {
  if (!$localStorage.Programme) {
    $localStorage.Programme = [];
  }
  var index = $scope.getExerciseIndex(exercise);
  if (index > -1) $localStorage.Programme.splice(index, 1);
  else $localStorage.Programme.push(exercise);
};

HTML:

... ng-class="{'orange': exerciseExists(exercise) }" ...

演示：http://plnkr.co/edit/R6TEisvQ7gkDcwBgw0D1?p=preview

相关文章：