javascript - 获取sessionStorage并恢复值

Question

我有一个具有不同 View 的 Angular 应用程序。在第一个 View 上我创建一个变量，在第二个 View 上我必须编辑它。 我用这个“sessionStorage”。在第一个 View 中，当我转到另一个页面时，我在 $sessionStorage 上记录变量列表。

当我开始第二次查看时，我得到了这些数据。在此 View 中，我希望能够编辑值或不编辑值。当我单击有效按钮时，我记录新值，当我按取消按钮时，我获得初始值。

这是第二个 View 的js文件。

angular.module('testNgStorageApp')
  .controller('MainCtrl', function ($scope, $sessionStorage) {
    var listNameRecorded = $sessionStorage.namesRecord;
    $scope.listNameTemp = listNameRecorded || [];

    $scope.edit = function(index){
        console.log("before", $scope.listNameTemp, listNameRecorded, $sessionStorage.namesRecord)
        $scope.listNameTemp[index] = $scope.newText;
        console.log("after", $scope.listNameTemp, listNameRecorded, $sessionStorage.namesRecord)
    }
...
});

html

<div ng-repeat="name in listNameTemp">
    <span>{{name}}</span>
    <input ng-model="newText"/>
    <button ng-click="edit($index)">Edit</button>
  </div>

我的问题是当我编辑值($scope.listNameTemp)时，$sessionStorage.namesRecords 会自动修改。

Answer 1

$sessionStorage.namesRecords 被修改的原因是 $sessionStorage.namesRecords 的引用被分配给 $scope.listNameTemp .

您可以使用angular.copy()来解决这个问题。 angular.copy() 创建并返回传递给它的对象的全新副本。

更新的代码:

angular.module('testNgStorageApp')
  .controller('MainCtrl', function ($scope, $sessionStorage) {
    var listNameRecorded = angular.copy($sessionStorage.namesRecord);
    $scope.listNameTemp = listNameRecorded || [];

    $scope.edit = function(index){
        console.log("before", $scope.listNameTemp, listNameRecorded, $sessionStorage.namesRecord)
        $scope.listNameTemp[index] = $scope.newText;
        console.log("after", $scope.listNameTemp, listNameRecorded, $sessionStorage.namesRecord)
    }
...
});