javascript - 如何向 AngularJS 中的现有 cookie 添加新值？

Question

我正在使用angulajs，在按钮单击时我设置cookie，并且工作正常，但是一旦页面刷新，然后在按钮单击后新值存储在数组中，但旧的cookie值将变为空，如何保留旧值cookie的值和加上必须添加新的值。我怎样才能做到这一点？

在 Controller 中--

 $scope.populateTimeZone = function (world_timezones) {
    var objTimeZoneDetails = new TimeZoneDetails(
       moment.tz(world_timezones.trim()).format('LTS'),
       moment.tz(world_timezones.trim()).format('LL'),
       moment.tz.zone(world_timezones.trim()).abbr(moment.utc().valueOf()),
       moment.tz.zone(world_timezones.trim()).name);

    //push values to array
    $scope.LstTimeZoneDetails.push(objTimeZoneDetails);

    $scope.selectedTimeZones = $scope.LstTimeZoneDetails;
    $cookies.putObject('selectedTimeZones', $scope.LstTimeZoneDetails);
};

if ($cookies.getObject('selectedTimeZones') === '' || $cookies.getObject('selectedTimeZones') === undefined)
    $cookies.putObject('selectedTimeZones', $scope.LstTimeZoneDetails);

$scope.selectedTimeZones = $cookies.getObject('selectedTimeZones') || {};

在 HTML 中--

<div class="form-inline">
                            <div class="form-group">
                                <select class="form-control" data-ng-model="selectedTimeZone">
                                    <option data-ng-repeat-start="(key, value) in timeZoneData.countries" data-ng-bind="value.name" data-ng-disabled="true" style="font-weight: bold;"></option>
                                    <option data-ng-repeat-end="" data-ng-repeat="tz in value.timezones" data-ng-bind="' - ' + tz" data-ng-value="tz"></option>
                                </select>
                            </div>
                            <div class="form-group">
                                <input id="btnAddTimeZone" type="button" value="Add Time Zone" class="btn btn-default" data-ng-click="populateTimeZone(selectedTimeZone)" />
                            </div>
                        </div>

Answer 1

我需要查看您的更多代码才能确定，但​​是从您显示的一小部分来看，我看不到您将 cookie 数据加载到 LstTimeZoneDetails 的位置。 。据我所知，正在发生的事情是这样的:

首次加载: LstTimeZoneDetails可能是一个空数组(因为 .push() 不会提示) 检查 cookie 值是否存在，设置为空数组 ( LstTimeZoneDetails ) selectedTimeZones变成空数组，或一个空对象 ( {} ) if LstTimeZoneDetails 还不是数组 ...您可能希望它是一个数组，但我再次不知道您的其余代码是什么样子。

点击按钮: 添加一些内容到 LstTimeZoneDetails数组，集合selectedTimeZones至LstTimeZoneDetails (为什么你需要两个不同的东西指向作用域上的同一个对象，这超出了我的范围，但是好吧......) 将 cookie 替换为 selectedTimeZones

刷新页面: Cookie不为空，设置selectedTimeZones到 cookie 值。 此时，LstTimeZoneDetails与上面的“第一次加载”中的“无论它是什么”相同。假设它是一个空数组，因此它是一个空数组。

点击按钮: 添加一些内容到 LstTimeZoneDetails数组，集合selectedTimeZones至LstTimeZoneDetails (为什么你需要两个不同的东西指向作用域上的同一个对象，这超出了我的范围，但是好吧......) 将 cookie 替换为 selectedTimeZones

......

你发现问题了吗？

你永远不会填充LstTimeZoneDetails使用旧值，并且您将用新值替换您使用旧值填充的变量!

所以我再次问 - 为什么存在不同的变量，据我所知，这些变量只是相互镜像？

要解决此问题，要么只使用一个，要么(据我所知) 替换$scope.selectedTimeZones = $cookies.getObject('selectedTimeZones') || {};与 $scope.LstTimeZoneDetails = $cookies.getObject('selectedTimeZones') || []; 然而，问题是现在 LstTimeZoneDetails不会被设置，所以无论哪种方式，你都需要重新考虑你的方法。