當按下後退按鈕時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