Question

我正在使用Ionic Framework构建一个移动应用程序，对于我的电子商务商店而言，我是Ionic的新手。现在，我将添加到购物车中的产品存储在一个数组中，但这一点效率不高，因为一旦用户移出视图，数据就会丢失。因此，我需要将数组存储在本地存储中。

<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);
    }

})

在我的Controller.js中，我尝试将数组添加到Local Storage并在控制台中输出。数据存储在本地存储中并将其打印到控制台，但重新加载页面时数据会消失。我无法找出我出错的地方。

Answer 1

实际存储在localStorage中的是一个字符串。因此，当您从localStorage读回时，您需要解析存储的字符串，以便获得原始对象。换句话说，而不是：

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

你需要：

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

AngularJS存储阵列在本地存储中

1 个答案: