我正在尝试构建一个购物车。我想将阵列发票添加到本地存储,以便以后可以访问它。
我想这种方法有一些错误
angular.module('myApp', ['ngCookies']);
function CartForm($scope, $cookieStore) {
$scope.invoice.items = $cookieStore.get('items');
$scope.addItem = function() {
$scope.invoice.items.push({
qty: 1,
description: '',
cost: 0
});
$scope.invoice.items = $cookieStore.put('items');
},
$scope.removeItem = function(index) {
$scope.invoice.items.splice(index, 1);
$scope.invoice.items = $cookieStore.put('items');
},
$scope.total = function() {
var total = 0;
angular.forEach($scope.invoice.items, function(item) {
total += item.qty * item.cost;
})
return total;
}
}
HTML包含一个按钮,它将新项目推送到数组中,数组会自动绑定。
<div ng:controller="CartForm">
<table class="table">
<tr>
<th>Description</th>
<th>Qty</th>
<th>Cost</th>
<th>Total</th>
<th></th>
</tr>
<tr ng:repeat="item in invoice.items">
<td><input type="text" ng:model="item.description"class="input-small"></td>
<td><input type="number" ng:model="item.qty" ng:required class="input-mini"> </td>
<td><input type="number" ng:model="item.cost" ng:required class="input-mini"> </td>
<td>{{item.qty * item.cost | currency}}</td>
<td>
[<a href ng:click="removeItem($index)">X</a>]
</td>
</tr>
<tr>
<td><a href ng:click="addItem()" class="btn btn-small">add item</a></td>
<td></td>
<td>Total:</td>
<td>{{total() | currency}}</td>
</tr>
</table>
</div>
本地阶段只保存字符串,不保存复杂对象。
因此,你可以做的是在保存时将其字符串化,并在访问时重新解析
localStorage['foo'] = JSON.stringify([1, 2, 3]);
请注意,字符串化过程将去掉数组中任何不合适的元素,例如函数。
重新解析:
var arr = JSON.parse(localStorage['foo']);
localStorage["items"] = JSON.stringify(items);
更新:您可以如下检索:`var项目:
localStorage.getItem('items');
源
localStorage只支持字符串,因此您必须使用JSON.stringfy((和JSON.parse((才能通过localStorage工作。
var p = [];
p[0] = "some";
localStorage["p"] = JSON.stringify(p);
对于您的代码:
var items = [{
qty: 10,
description: 'item',
cost: 9.95}];
localStorage.setItem("items", JSON.stringify(items));
// get
var items = JSON.parse(localStorage.getItem("items"));
localStorage
只支持字符串,因此必须使用以下代码:
var p = [];
p[0] = "some";
localStorage["p"] = JSON.stringify(p);