AngularJS存储阵列在本地存储

问题描述：

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

<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，我曾尝试加入阵列本地存储并在控制台输出。数据存储在本地存储器中并将其打印到控制台，但重新加载页面时数据消失。我无法找出我要出错的地方。

这是一个贫穷的答案，所以我会离开它的意见，但这种联系可能有帮助：HTTP：//计算器.COM /问题/ 12940974 /保持模型的范围外，当变化的视图功能于angularjs间。这看起来像一个类似于你的问题。这里的答案围绕使用服务来持久化状态，使用$ rootScope。$ emit和$ rootScope。$ on来标志保存和加载状态。 –

从localStorage重新读取数组的代码在哪里？ –

@JB我如何定义？我错过了一些非常重要的东西吗？ – vkm

答

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

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

你需要：

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

AngularJS存储阵列在本地存储

相关推荐