如何使用 Angular 存储和获取数组 cookie

Question

当用户点击 GO 按钮时，我需要将值推送到数组中并存储在 cookie 中。

如果值大于 10，我需要删除数组中第一个添加的项目并更新 cookie，显示在前端。

但我尝试了多种方法，有时我得到的值有时不是，代码无法始终如一地工作。

请在代码下方找到

JS：

$scope.lastorder = $cookies['lastorder'];

$scope.cookiefunction=function(val) {
                /*
                $scope.lastorder.push(val);
                if($scope.lastorder.length > 4){
                        $scope.lastorder.shift();
                }
                $cookies.putObject('lastorder',$scope.lastorder);*/


                $cookies['lastorder']={'productname':val};
                $scope.lastorder = $cookies['lastorder'];
                if($scope.lastorder.length > 4){
                        $scope.lastorder.shift();
                }
                //$cookies['lastorder']={$scope.lastorder};
                $scope.lastorder = $cookies['lastorder'];
        };

在前端：

li ng-repeat="x in lastorder">{{x.productname}}

Answer 1

Plunkr：Click here

  var DemoApp = angular.module('DemoApp', ['ngCookies']);

    DemoApp.controller('DemoController', function ($cookies, $scope, $log) {
      var cookieName = 'orderList';//
      $scope.orderList = $cookies.getObject(cookieName) || [];

      $scope.saveCookie = function (val) {
        if ($scope.orderList.length >= 10) {
          $scope.orderList.shift();
        }

        $scope.orderList.push({productName: val}); 
        $cookies.putObject(cookieName, $scope.orderList);
      }
    });