CODEWITHSUNDEEP
angularjsionic-frameworklocal-storage
vkm
vkm

Reputation: 548

AngularJS local storage only last item stored

I am facing issues storing to Local Storage in AngularJS. I am developing an E-Commerce mobile appication using Ionic Framework and displaying Product data using ng-repeat. Each of the ion-item has product details and a button which is associated with addItem() in TodoController.On the click of the button, the product data gets stored into Local Storage. However, the issue is that, whenever i click through a series of buttons, only the last product whose button is clicked gets stored in local storage and the previous clicked button's data doesn't.

<a class="item item-thumbnail-left" href="#">
        <img ng-src={{product.featured_image.source}}>
        <div class="row">
            <div class="col">
                <h3><span ng-bind="product.ID"></span></h3>
                <h3><span ng-bind="product.title"></span></h3>
            </div>
        </div>
        <div class="row">
            <div class="col">
                <p>{{product.meta_fields.woo.currency_symbol}}{{product.meta_fields.woo.price}}</p>
            </div>
        </div>

        <div class="row">
            <div class="col">
                <p>Qty</p>              
                    <select ng-init="quantity = '1'" ng-model="quantity">
                        <option value="1">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        <option value="13">13</option>
                        <option value="14">14</option>
                        <option value="15">15</option>
                    </select>
                </div>
          <div class="col"></div>
         <div class="col" ng-controller="TodoController">
            <button ng-click="addItem(product.ID, product.title,none , product.meta_fields.woo.price,  quantity)">Add Me</button>
            </div>
       </div>
    </a>

Controller

.controller('TodoController', function($scope) {


  $scope.saved = localStorage.getItem('todos');
  $scope.todos = (localStorage.getItem('todos')!==null) ? JSON.parse($scope.saved) : [];
  localStorage.setItem('todos', JSON.stringify($scope.todos));


   $scope.addItem = function (id,item,size,price,quantity) {
        $scope.todos.push({id,item,size,price,quantity});
        localStorage.setItem('todos', JSON.stringify($scope.todos));
    }

})

Upvotes: 0

Views: 467

Answers (2)

Fridjon Gudjohnsen
Fridjon Gudjohnsen

Reputation: 827

Make sure you do not have the string 'undefined' or undefined in the localStorage:

$scope.todos = (localStorage.getItem('todos')!==null && 
                localStorage.getItem('todos')!=='undefined') ? JSON.parse($scope.saved) : [];

Upvotes: 0

Mohan Singh
Mohan Singh

Reputation: 883

Issue is in your controller, you are passing only values in object without keys. you need to modify $scope.addItem function

   $scope.addItem = function(id, item, size, price, quantity) {
    $scope.todos.push({
      id: id,
      item: item,
      size: size,
      price: price,
      quantity: quantity
    });
    localStorage.setItem('todos', JSON.stringify($scope.todos));
  }

Also i have created a plunker example for you, Have a look at http://plnkr.co/edit/3Uzj0Zz9TVYftjFyEGv4?p=preview

Upvotes: 0

Related Questions