Question

我有一个用户设置页面，用于从本地存储$localStorage.user加载用户，将其存储在范围self.user内的变量中，并允许用户通过视图上的表单修改数据。用户对更改感到满意后，$localStorage.user会再次被self.user替换为瞧。如果用户离开页面，$localStorage.user应该保持不变。但是出于某种原因，更改视图上的self.user变量似乎也在改变$localStorage.user，我无法理解原因。

示例视图：

<label class="item item-input">
      <input type="text" class="ec" name="firstName" placeholder="First Name"  ng-bind="{{setCtrl.user.firstName}}" ng-model="setCtrl.user.firstName" required>
</label>

示例控制器：

self.user = $localStorage.user; // when page loads run this

$localStorage.user = self.user; // runs when user saves

Answer 1

本质上，Javascript对象作为其引用的副本传递。这意味着在调用

之后

self.user = $localStorage.user;

，对self.user的任何更改也意味着更改$localStorage.user，因为它们指向相同的内存地址。您需要复制存储用户，例如使用angular的内置复制功能：

angular.copy($localStorage.user, self.user);

Answer 2

原因是您在$localStorage.user处引用了对象。当您执行self.user = $localStorage.user;时，您基本上说self.user是$localStorage.user的别名（在内存中），因此更改self.user也会更改$localStorage.user。

如何避免？克隆$localStorage.user。 LoDash示例： self.user = _.cloneDeep($localStorage.user);

Answer 3

自从用户＆amp; $ localStorage.user指向同一个Object，对其中一个的修改将反映在另一个上，因此您必须进行深层复制以避免这种情况。

从via更改数据似乎正在修改localStorage对象

3 个答案: