25

モーダルウィンドウがいくつかあり、そこにカートアイテム情報を渡す必要があるため、ローカルストレージでショッピングカートのフロントエンドを作成しようとしています。カートに追加をクリックするたびに、オブジェクトが作成され、ローカルストレージに作成されます。複数のソリューションを試した後、すべてを配列に入れ、新しいオブジェクトを配列にプッシュする必要があることを知っています-機能しません

それが私が持っているものです（最後のオブジェクトのみを保存します）：

var itemContainer = $(el).parents('div.item-container');
var itemObject = {
    'product-name': itemContainer.find('h2.product-name a').text(),
    'product-image': itemContainer.find('div.product-image img').attr('src'),
    'product-price': itemContainer.find('span.product-price').text()
};

localStorage.setItem('itemStored', JSON.stringify(itemObject));
4

2 に答える 2

50

毎回他のオブジェクトを上書きしているので、それらすべてを保持するために配列を使用する必要があります。

var oldItems = JSON.parse(localStorage.getItem('itemsArray')) || [];

var newItem = {
    'product-name': itemContainer.find('h2.product-name a').text(),
    'product-image': itemContainer.find('div.product-image img').attr('src'),
    'product-price': itemContainer.find('span.product-price').text()
};

oldItems.push(newItem);

localStorage.setItem('itemsArray', JSON.stringify(oldItems));

http://jsfiddle.net/JLBaA/1/

配列の代わりにオブジェクトを使用することを検討し、製品名をキーとして使用することもできます。これにより、重複エントリがlocalStorageに表示されるのを防ぎます。

于 2012-08-28T15:49:17.123 に答える