無法讀取使用localStorage undefined屬性推動

Question

我有一個動態列表視圖，顯示商店的各種優惠。我希望用戶能夠在列表視圖中選擇時保存這些商品，以便使用localStorage生成已保存的商品特徵。

我已經設法達到了一個點，您可以從列表視圖中選擇優惠節省1個優惠。

在選擇listview行時，它會從該特定選擇中獲取數據屬性並填充一個數組，然後將該數組傳遞給localStorage。

JS

$("#offers ul").on("click", ">li", function(event, ui) {                                           
    var offertitle = $(this).closest('li').attr('data-offer-title'); 
    var offerdesc = $(this).closest('li').attr('data-offer-desc'); 
    var offerexpiry = $(this).closest('li').attr('data-offer-expiry'); 

    if (offerObject === null) { 
     offerObject = []; 
    } 

    var offerObject= {"offer":[ 
     { 
      'offertitle': offertitle, 
      'offerdesc': offerdesc, 
      'offerexpiry': offerexpiry 
     } 
    ]}; 

    var offers = localStorage.setItem('offerObject', JSON.stringify(offerObject)); 
    offers.push(offerObject); 
});  

var retrievedOffers = JSON.parse(localStorage.getItem('offerObject')); 

var output2=''; 
for (var i in retrievedOffers.offer) { 
    output2+="<li>" + retrievedOffers.offer[i].offertitle + " " + retrievedOffers.offer[i].offerdesc + " " + retrievedOffers.offer[i].offerexpiry+"</li>"; 
} 
$('#savedofferlist').html(output2).listview().listview('refresh'); 

我現在想推列表視圖進入offerObject變量的進一步優惠，以生產基於使用本地存儲用戶的選擇已保存的優惠的列表視圖。

當我嘗試從列表視圖中進行選擇時，出現JS錯誤「無法讀取未定義的屬性推送」。即使存在錯誤，它仍會顯示我所做的列表中的1個選擇。

我需要分解.push（offerObject）而不是推送整個變量嗎？

任何幫助，將不勝感激。

Answer 1

的setItem()方法上localStorage有void返回類型（docs），所以你要使用的「一無所有」 push()。

您需要從本地存儲中獲取列表（無論是在插入之前還是在插入之後）......並在本地「追加」它，如果您在「設置」之前提取它的話。

//Option 1: set then fetch 
localStorage.setItem('offerObject', JSON.stringify(offerObject)); 
var offers = JSON.parse(localStorage.getItem('offerObject')); 


//Option 2: fetch, set then append 
var offers = JSON.parse(localStorage.getItem('offerObject')); 
localStorage.setItem('offerObject', JSON.stringify(offerObject)); 

//append the current object to the previously fetched list 
offers.push(offerObject); 

更新

看代碼仔細看來，你的JSON結構不匹配，我認爲你希望的。基本上，你希望你的存儲對象「offerObject」實際上是一個數組（列表），而不是一個對象（例如地圖）。

因此，您將總是需要先從本地存儲中獲取當前列表，然後將其添加回來，然後將其設置回來。

我已經改變了你的代碼，以更好地反映什麼，我認爲你正在試圖做的（這裏是一個JSFiddle它，你可以嘗試一下：

//get your values (I hard coded this for my test) 
var offertitle = "This is the offer title id:[" + new Date().getTime() + "]"; 
var offerdesc = "This is the offer description"; 
var offerexpiry = "This is the offer expiry " + new Date(); 

//create your offer object (I just made this a simple 3 key/value pair) 
var offer = { 
    "offertitle": offertitle, 
    "offerdesc": offerdesc, 
    "offerexpiry": offerexpiry 
}; 

var offers = [];//initialize an empty array for all of the offers 

//get the current list of offers (if any) 
var existingOffers = localStorage.getItem('offers'); 
if(existingOffers != null){ 
    offers = JSON.parse(existingOffers); 
} 

//append the new item 
offers.push(offer); 

//reset the local storage 
localStorage.setItem('offers', JSON.stringify(offers)); 

console.log('Offers: ' + offers.length + '\n\n' + JSON.stringify(offers));