我正在将对象推送到$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-class检查锻炼是否在程序中
<i class="exercise-add-indicator ion-ios-checkmark-outline" ng-class="{'orange': programme.indexOf(exercise) > -1}"></i>
问题
这有两个问题:
刷新后,ng-class
根据我的$scope.programme
addExerciseToProgramme
函数不尊重indexOf
检查,无论如何都要将运动对象推送到数组中!
答案 0 :(得分:1)
Array.prototype.indexOf()
使用严格相等:只有操作数引用相同的对象时,比较对象的表达式才为真。
使用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) }" ...