AngularJS store array in local storage

Question

I am building a mobile application using the Ionic Framework, for my E-Commerce store and I am very new to Ionic. Right now, I am storing the products added to the cart in an array, but this is not efficient as the data will be lost, once the user moves out of the view. Therefore, I need to store the array in local storage.

<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 }}<span ng-bind="selectedSize.variation._price" ng-model="productPrice"></span></p>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <p>Size</p>
      <select ng-init="selectedSize = product.meta_fields.woo.variations.items[0]" ng-model="selectedSize" ng-options="size.variation.attribute_pa_size for size in product.meta_fields.woo.variations.items"></select>
    </div>
    <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">
      <button ng-click="addItem(product.ID, product.title, selectedSize.variation.attribute_pa_size, selectedSize.variation._price,  quantity)">Add Me</button>
    </div>
  </div>
</a>

Controller.js

.factory("items", function () {
    var items = {};
    items.data = [];
    return items;
})

.controller('ItemsController', function($scope,items) {
    $scope.items = items;


    $scope.addItem = function (id,item,size,price,quantity) {
        items.data.push({id,item,size,price,quantity});
        localStorage.setItem("cart", JSON.stringify(items));
        var cart = localStorage.getItem("cart");
        console.log(cart);
    }

})

In my Controller.js, I have tried adding the array to Local Storage and output it in the console. The data gets stored in Local Storage and prints it to the console, but the data goes away when reloading the page. I am unable to find out where I'm going wrong.

This is a poor answer, so I'll leave it in the comments, but this link might help: http://stackoverflow.com/questions/12940974/maintain-model-of-scope-when-changing-between-views-in-angularjs. It seems like an issue similar to yours. The answer there revolves around using a service to persist the state, using $rootScope.$emit and $rootScope.$on to signal saving and loading the state. — PANDA Stack, Sep 26 '15 at 06:52
Where is the code that re-reads the array from localStorage? — JB Nizet, Sep 26 '15 at 07:06
@JB how do i define that? Am i missing out something very important? — vkm, Sep 26 '15 at 07:38
Your factory is returning `{data:[]}` which isn't right, you should return some methods to add/remove/get the data from the service and also have a method in there that will look into localStorage and set the data with that. So you just interact with the service and the service handle local storage for you, but you must read from the localStorage to get the data back. — GillesC, Sep 26 '15 at 07:50
"this is not efficient as the data will be lost, once the user moves out of the view": have you considered storing the data in a service? Services persist across the lifetime of the app (out of the box) and will be available to any view's controller that is navigated to next and will negate you having to use local storage. — lukkea, Sep 26 '15 at 07:53
@vkm angular default local storage service is not persistent with ionic applications, so i would advice you to use this module https://github.com/grevory/angular-local-storage , Plus as Fridjon mentioned in his answer, you are storing as a string so need to parse it as object. — Mudasser Ajaz, Sep 26 '15 at 09:24

score 3 · Answer 1 · answered Sep 26 '15 at 08:51

What gets actually stored in localStorage is a string. Therefore when you read back from localStorage you need to parse the stored string so that you get the original object. In other words, instead of:

var cart = localStorage.getItem("cart");

you need:

var cart = JSON.parse(localStorage.getItem("cart"));

AngularJS store array in local storage

1 Answers1