AngularJS配列で値が上書きされる

Question

私はショッピングアプリケーション（Angular JSとIonic）を作成しています。カートにアイテムを追加するたびに、前のエレメントが上書きされます。以下は私のコードです：

detail.html：

<ion-view view-title="DetailPage"> 
     <ion-content> 
      <h4> 
       Product Details 
      </h4> 
      <ion-view view-title="playlists"> 
       <ion-content> 
        <input type="button" ng-click="addToCart();" value="add cart" /> 
       </ion-content> 
      </ion-view> 

Controller.js：

.controller('detailsCtrl', function($scope, $stateParams) { 

     var productname = $stateParams.playlistname; 
     var arr = []; 
     $scope.addToCart = function() { 
      arr.push(productname); 
      localStorage.setItem('arr', arr); 


     }) 

私は要素の上書きを扱うにはどうすればよいですか？

Answer 1

アレイを毎回再初期化してから、新しいアレイをローカルストレージに書き込んでいます。ローカルストレージから既存の配列を取得し、要素をそれにプッシュする必要があります。

.controller('detailsCtrl', function($scope, $stateParams) { 

     var productname = $stateParams.playlistname; 
     // Get the product array from local storage if it exists 
     // or initialise a new array. 
     var arr = localStorage.getItem('arr') || []; 
     $scope.addToCart = function() { 
      arr.push(productname); 
      localStorage.setItem('arr', arr); 


     })