localStorage параметр undefined при нажатии кнопки возврата

Question

У меня есть 3 страницы.

1. Страница категории - показывает список категорий фильмов, например. Ужасы, Романтика, Триллер.
2. Список фильмов - получает список фильмов, основанных на выбранной категории
3. Подробная информация о фильме - извлекает информацию о фильме, когда фильм выбран из списка фильмов

С «Категория страницы» в «Список фильмов», я прослушивание события клика и сохранение идентификатора категории в localStorage перед тем, как сменить страницу на «Список фильмов».

$(document).on('click', 'a', function(event, ui) { 
    var data_id = $(this).attr('id'); 
    // store some data 
    if (typeof(Storage) !== "undefined") { 
    localStorage.category = data_id; 
    } 
    // Change page 
    $.mobile.changePage("#movelist"); 
}); 

Из «Списка фильмов» на «Подробную информацию о фильме», я добавить фильм ID в LocalStorage и изменений страницы «Переместить детали».

$(document).on('click', 'li', function() { 
    if (typeof(Storage) !== "undefined") { 
    localStorage.movie_id= $(this).attr("id"); 
    console.log(localStorage.category); 
    } 
    $.mobile.changePage("#movie-details"); 
}); 

Проблема я столкнулся в том, что, когда кнопка нажата назад на странице «Сведения о кинофильме», страница «Список фильмов» пуст, так как идентификатор категории в LocalStorage становится «неопределенным».

$(document).on('pagebeforeshow', '#movielist', function() { 
    //empty list to prevent duplicates 
    $('#movie-list').empty(); 
    //get attractions JSON and populate list based on category 
    $.getJSON("./json/movielist.json", function(data) { 
    $.each(data, function(key, val) { 
     if (val.category == localStorage.category) { 
     $('#movie-list').append("<li id='" + val.id + "' class='ui-li-has-thumb ui-first-child'><a class='ui-btn ui-btn-icon-right ui-icon-carat-r'><img src='" + val.image + 
           "' class='thumbnail'/><h2>" + 
           val.name + "</h2></a></li>"); 
     } 
    }); 
    }); 
}); 

Вопрос 1: данные локального хранилища будут удалены при нажатии кнопки «Назад». Зачем?

Вопрос 2: Как я могу убедиться, что категория сохранена, чтобы мой движитель все равно загрузился?

Цените всю предоставленную помощь. Благодарю.

Answer 1

$(document).on('click', 'a', function(event, ui) { 
    var data_id = $(this).attr('id'); 
    // store some data 
    if (typeof(Storage) !== "undefined") { 
     localStorage.setItem('category', data_id); 
    } 
    // Change page 
    $.mobile.changePage("#movelist"); 
}); 
$(document).on('click', 'li', function() { 
    if (typeof(Storage) !== "undefined") { 
     localStorage.setItem('movie_id', $(this).attr("id")); 
     console.log(localStorage.getItem('category')); 
    } 
    $.mobile.changePage("#movie-details"); 
}); 
$(document).on('pagebeforeshow', '#movielist', function() { 
    //empty list to prevent duplicates 
    $('#movie-list').empty(); 
    //get attractions JSON and populate list based on category 
    $.getJSON("./json/movielist.json", function(data) { 
     $.each(data, function(key, val) { 
      if (val.category == localStorage.getItem('category')) { 
       $('#movie-list').append("<li id='" + val.id + "' class='ui-li-has-thumb ui-first-child'><a class='ui-btn ui-btn-icon-right ui-icon-carat-r'><img src='" + val.image + 
         "' class='thumbnail'/><h2>" + 
         val.name + "</h2></a></li>"); 
      } 
     }); 
    }); 
}); 

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage