数据在 viewmodel 和 $sessionStorage 之间奇怪地同步

Question

我正在 $sessionStorage 中存储一个对象列表。然后在我的一个控制器中，我获取该列表的值并将其显示在页面上，用户可以删除其项目。

问题是，当用户从视图模型中删除该列表的一项时，它也会从我不想要的 $sessionStorage 中删除。

这是我的控制器代码

(function () {
  'use strict';

  myModule.controller('infoCollecteArticlesController', ['$scope', '$rootScope', '$location', '$sessionStorage', 'global_factory', 'infoCollecteArticlesFactory',
  function ($scope, $rootScope, $location, $sessionStorage, global_factory, infoCollecteArticlesFactory) {
    var vm = this;

    /*
    * PUBLIC FUNCTIONS
    */

    // Delete a URL from the vm
    vm.deleteUrl = function(index) {
        vm.web_urls.splice(index, 1);
    }

    // Watch sessionStorage
    $scope.$watch(function () {
        return $sessionStorage.currentCommuneData;
    }, function (newVal, oldVal) {
        if (newVal) {
            vm.web_urls = newVal.web_information.web_urls;
            vm.filters = newVal.web_information.stop_list;
        }
        else {
            window.location.replace("test.html");
        }
    }, true);
}
]);
})();

Answer 1

复制 web_urls 以断开绑定

// Delete a URL from the vm
    vm.deleteUrl = function(index) {
        vm.web_urls = angular.copy(vm.web_urls).splice(index, 1);
    }

您也可以复制 newVal 以便断开绑定

vm.web_urls = angular.copy(newVal.web_information.web_urls);

Answer 2

vm.web_urls = newVal.web_information.web_urls;

这一行直接引用同内存位置的sessionStorage变量的对象

因此，即使您从 vm.web_urls 中删除对象，sessionStorage 中的数据也会被删除。

而是使用

复制对象而不是引用

vm.web_urls = angular.copy(newVal.web_information.web_urls);
vm.filters = angular.copy(newVal.web_information.stop_list);

所以将 watch 函数更改为

$scope.$watch(function () {
        return $sessionStorage.currentCommuneData;
    }, function (newVal, oldVal) {
        if (newVal) {
            vm.web_urls = angular.copy(newVal.web_information.web_urls);
            vm.filters = angular.copy(newVal.web_information.stop_list);
        }
        else {
            window.location.replace("test.html");
        }
    }, true);

数据在 viewmodel 和 $sessionStorage 之间奇怪地同步

Data strangely synchronized between viewmodel and $sessionStorage

watch

session-storage

angularjs