How to add new value to existing cookie in angularjs?

Question

I'm using angulajs, on button click i'm setting cookie, and it is working fine, but once page refresh then after button click new value store in array, but old cookie value will become empty, how to retain old cookie value and plus have to add new value. how i can do this?

in 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') || {};

in 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

I would need to see more of your code to be sure, but from the little you show I don't see where you load the cookie data into LstTimeZoneDetails . From what I gather, this is what is happening:

First load: LstTimeZoneDetails is probably an empty array (because .push() doesn't complain) Check if cookie value exists, set to empty array ( LstTimeZoneDetails ) selectedTimeZones becomes that empty array, or an empty object ( {} ) if LstTimeZoneDetails isn't an array yet ... you probable want this to be an array but again I don't know what the rest of your code looks like.

Click button: Append something to the LstTimeZoneDetails array, set selectedTimeZones to LstTimeZoneDetails (why you need two different things pointing to the same object on scope is beyond me, but ok...) Replace the cookie with selectedTimeZones

Refresh page: Cookie isn't empty, set selectedTimeZones to the cookie value. At this point, LstTimeZoneDetails is the same "whatever it is" as in "First load", above. The assumption there was that it is an empty array, so it is an empty array.

Click button: Append something to the LstTimeZoneDetails array, set selectedTimeZones to LstTimeZoneDetails (why you need two different things pointing to the same object on scope is beyond me, but ok...) Replace the cookie with selectedTimeZones

........

Do you see the problem, yet?

You never populate LstTimeZoneDetails with the old values, and you are replacing the variable you did populate with the old values with the new values!

So again I ask - why are there to different variables that from what I can tell simply mirror each other?

To fix, either just use the one, or (as far as I can tell) replace $scope.selectedTimeZones = $cookies.getObject('selectedTimeZones') || {}; $scope.selectedTimeZones = $cookies.getObject('selectedTimeZones') || {}; with $scope.LstTimeZoneDetails = $cookies.getObject('selectedTimeZones') || []; $scope.LstTimeZoneDetails = $cookies.getObject('selectedTimeZones') || []; the problem with this, however, is that now LstTimeZoneDetails won't be set so either way you do need to rethink your approach a little bit.