Question

我有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

按下后退按钮时，localStorage参数未定义

1 个答案: