获取sessionStorage并恢复值

Question

我有一个具有不同视图的 angular 应用程序。在第一个视图中，我创建了一个变量，而在第二个视图中，我必须对其进行编辑。我为此使用 "sessionStorage"。在第一个视图中，当我转到另一个页面时，我在 $sessionStorage 上记录了变量列表。

我在开始第二个视图时得到了这些数据。在此视图中，我希望能够编辑值。当我点击有效按钮时，我记录新值，当我按下取消按钮时，我得到初始值。

这是第二个视图的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() 创建并 returns 传递给它的对象的全新副本。

更新代码：

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)
    }
...
});

获取sessionStorage并恢复值

Get sessionStorage and restore value

javascript

session-storage

local-storage

angularjs