javascript - 如何使用Angular 1.5版在Cookie中存储和获取数组值

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

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

但是有时我会尝试多种方法，但有时却无法获取值，因此代码无法始终如一地工作。

请在下面的代码中找到

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});
    $scope.orderList = $cookies.putObject(cookieName,$scope.orderList);
  }

注意：我正在使用angular 1.5和cookie 1.5版本。

http://plnkr.co/edit/K17uJv72U2ytG6JHZBtn?p=preview

最佳答案

你没有意识到一件事。仅当您第二次单击按钮时才会出现该错误。
您收到此错误的原因是代码的最后一行-

$scope.orderList = $cookies.putObject(cookieName,$scope.orderList);

当您将其替换为-

console.log(typeof $cookies.putObject(cookieName,$scope.orderList));

您将在控制台中看到undefined。这就是问题所在。当该函数第二次运行时，它正在评估length的undefined，因此是错误。

只需用$cookies.putObject(cookieName,$scope.orderList)替换该行，因为您的$scope.orderList已经等于带有新推入值的数组。

编辑：
更新的代码

var cookieName = 'orderList';
$scope.saveCookie = function (val) {
    $scope.orderList = $cookies.getObject(cookieName) || [];
    if ($scope.orderList.length >= 10) {
      $scope.orderList.shift();
    }

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

我将$scope.orderList的定义带入了函数内部，因为一旦失去它的值，每次单击按钮时它都会重新评估。它并不是在所有情况下都至关重要。您可以根据应用程序流程将其排除在功能之外。