title: how to add an array to localstore in angularjs
body: <p>I am trying to build a shopping cart. I want to add the array invoice to localstorage so that i could access it later.</p>
  
  <p>I guess there are some errors with this form of approach</p>
  
  <pre><code>angular.module('myApp', ['ngCookies']);
  function CartForm($scope, $cookieStore) {
  $scope.invoice.items = $cookieStore.get('items');
  $scope.addItem = function() {
      $scope.invoice.items.push({
          qty: 1,
          description: '',
          cost: 0
      });
     $scope.invoice.items = $cookieStore.put('items');
  },
  
  $scope.removeItem = function(index) {
      $scope.invoice.items.splice(index, 1);
   $scope.invoice.items = $cookieStore.put('items');
  },
  
  $scope.total = function() {
      var total = 0;
      angular.forEach($scope.invoice.items, function(item) {
          total += item.qty * item.cost;
      })
  
      return total;
   }
   }
  </code></pre>
  
  <p>HTML contains a button , which pushes the new items to the array which gets automatically binded.</p>
  
  <pre><code>&lt;div ng:controller="CartForm"&gt;
  &lt;table class="table"&gt;
      &lt;tr&gt;
  
          &lt;th&gt;Description&lt;/th&gt;
          &lt;th&gt;Qty&lt;/th&gt;
          &lt;th&gt;Cost&lt;/th&gt;
          &lt;th&gt;Total&lt;/th&gt;
          &lt;th&gt;&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr ng:repeat="item in invoice.items"&gt;
          &lt;td&gt;&lt;input type="text" ng:model="item.description"class="input-small"&gt;&lt;/td&gt;           
          &lt;td&gt;&lt;input type="number" ng:model="item.qty" ng:required class="input-mini"&gt;  &lt;/td&gt;
          &lt;td&gt;&lt;input type="number" ng:model="item.cost" ng:required class="input-mini"&gt;  &lt;/td&gt;
          &lt;td&gt;{{item.qty * item.cost | currency}}&lt;/td&gt;
          &lt;td&gt;
              [&lt;a href ng:click="removeItem($index)"&gt;X&lt;/a&gt;]
          &lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
          &lt;td&gt;&lt;a href ng:click="addItem()" class="btn btn-small"&gt;add item&lt;/a&gt;&lt;/td&gt;
          &lt;td&gt;&lt;/td&gt;
          &lt;td&gt;Total:&lt;/td&gt;
          &lt;td&gt;{{total() | currency}}&lt;/td&gt;
      &lt;/tr&gt;
  &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>