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

Question

当用户单击“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

Answer 1

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

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

当你将其替换为 -

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

您将在控制台中得到undefined。这就是问题所在。当函数第二次运行时，它正在计算 undefined 的 length，因此出现错误。

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

编辑: 更新代码

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 的定义，因为如果它的值丢失，它将在每次单击按钮时重新计算。它并非在所有情况下都至关重要。您可以将其保留在函数之外，具体取决于您的应用程序流程。