按下后退按鈕時，localStorage參數未定義

Question

我有3頁。

1. 類別頁面-顯示電影類別的列表，例如恐怖片，浪漫片，驚悚片。
2. 電影列表-根據所選類別檢索電影列表
3. 電影詳細信息-從電影列表中選擇電影時檢索電影詳細信息

從“類別頁面”到“電影列表”，我將單擊事件並將類別ID存儲到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中的類別ID變為“未定義”。

$(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：按下后退按鈕會清除localStorage數據嗎？ 為什么？

問題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