如何使用 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 已经等于推入新值的数组。

编辑： 更新代码

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

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

How to store and get a array values in cookie with Angular version 1.5

javascript

jquery

angularjs

cookies

setcookie