jquery mobile page isn't working with localstorage - jquery-mobile

Question

Phonegap
Jquery mobile
Not working on chrome browser or iOS.
I'm trying to implement "Recent History" functionality, where if a user visits a page, the page title will be stored in localStorage, then retrieved later.
I have a button on a page, that when clicked adds a (key,value) to localstorage.
$(document).on('tap','#getMeThere',function(){
var title = $('#serviceTitle').text();
var duplicate = false;
for (var i = 0; i < window.localStorage.length; i++){//check if service is already in storage
if(window.localStorage.getItem(window.localStorage.key(i)) == title){
duplicate = true;
break;
}
}
if(duplicate == false){//does not exist in array
window.localStorage.setItem(title,title); //add to local storage
}
});
I have another button on a different page, that when clicked, loads a new page and displays all items in localStorage in a list view.
$(document).on('pagebeforecreate', '#recent', function(){//display services that user has visited
if(window.localStorage.length == 0){
console.log('local storage length=' + window.localStorage.length);
$('#recentEmpty').text("You haven't visited any services yet! Any services you visit will show up on this page.");
}
else{
for (var i = 0; i < window.localStorage.length; i++){
$("#recentList").append($("<li><a href='#ymca' data-transition='slide'>YMCA</a></li>"));
}
console.log('local storage length=' + window.localStorage.length);
}
});
Case 1: The problem is if say i open my app. I click the 2nd button, to see "You haven't visited...". That's fine. Then i go to another page and click the 1st button to add a value to localStorage. When i click the 2nd button again, i'm supposed to see one list item, instead i still see "You haven't visited". Even though i can see while inspecting element that localStorage.setItem was successful and there is 1 value in localStorage. I need to refresh the browser in order to see the list item.
Case 2: I open my app, click the 1st button to add to storage, then click the 2nd button to display it, my recent history page correctly shows 1 list item, without needed to refresh.
It seems to be some sort of caching issue. Or maybe i need to somehow refresh the page?

Answer 1

You are using pagebeforecreate, which is run before the page is created, which happens once. You probably want pagebeforeshow.