Localstorage cleared after restarting the application on phonegap IOS?

Question

I am trying to cache JSON data on in localstorage to load it when there is no internet connection. It is working fine but when I restart the app I think the localstorage cleared

Here is my code:

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {

    document.addEventListener("offline", function() {
    alert("No internet connection");


    $.each(JSON.parse(localStorage.getItem('foo')), function(key, val) {
    if(!(val.php)){val.php=0;}
$('ul.get-mertchant').append('<li> <a href="azkadenya.html?id=' + val.nid + '&nop='+ val.php +'" class="li-link"><div class="circle-img"><img src="'+ val.logo + '" /></div><div class="merchant-info"><h1>'+ val.node_title +'</h1><p>You Have '+ val.php +' Binggz</p></div><div class="more-icon"></div></a> </li>');
}); 

}, false);
    $.getJSON('mywebsite/views/services_merchant_mobile', function(data) {
        localStorage.setItem('foo', JSON.stringify(data));

var items = [];
$.each(JSON.parse(localStorage.getItem('foo')), function(key, val) {
    if(!(val.php)){val.php=0;}
$('ul.get-mertchant').append('<li> <a href="azkadenya.html?id=' + val.nid + '&nop='+ val.php +'" class="li-link"><div class="circle-img"><img src="'+ val.logo + '" /></div><div class="merchant-info"><h1>'+ val.node_title +'</h1><p>You Have '+ val.php +' Binggz</p></div><div class="more-icon"></div></a> </li>');
});

})
}

what is wrong??

Answer 1

Starting from IOS 5.1 Apple decided to make local storage a temp area. If you need persistent storage on iOS 5.1, use PhoneGap's File API. Here are a couple links to learn about the issue.

http://community.phonegap.com/nitobi/topics/phonegapbuild_localstorage_on_ios_5_1

http://docs.phonegap.com/en/2.6.0/cordova_storage_storage.md.html#Storage

Apple discurages you from using local storage as well. iOS PhoneGap app rejected because of the use of localStorage