Question

我正在使用会话存储来保存链接内容和图像。它工作但问题是后退按钮。它不起作用。它可能会解决History API，但支持很糟糕。没有IE，Android支持......还有其他选择吗？使用sessionStorage我无法解决它？这是代码：

我的链接

      <li><a data-tab="#home" href="#home">Home</a></li>
      <li><a data-tab="#link1" href="#football">Football</a></li>
      <li><a data-tab="#link2" href="#hockey">Hockey</a></li>
      <li><a data-tab="#link3" href="#">Tennis</a></li>
      <li><a data-tab="#link4" href="#">Basketball</a></li>
      <li><a data-tab="#link5" href="#">Baseball</a></li>

和JS（sessionStorage）

$("#navigation a").on("click", function(e){
      var currTab = $(this).data("tab"),
          bodyClassName = "bg-" + currTab.replace(/#/, "");
      sessionStorage.setItem("currentTab", currTab);
      sessionStorage.setItem("bodyClassName", bodyClassName);
      $(".panel").hide();
      $(currTab).fadeIn();

      document.body.className = bodyClassName;
    });

    var lastSelectedTab = sessionStorage.getItem("currentTab"),
        lastBodyClassName = sessionStorage.getItem("bodyClassName");

    if (!lastSelectedTab) {
      lastSelectedTab = "#home";
      lastBodyClassName = "bg-home"
    }
    $(lastSelectedTab).fadeIn();
    document.body.className = lastBodyClassName;

Answer 1

看看 this article ，它可能对你有很大的帮助！

更新

我已创建此示例，它适用于我的浏览器历史记录（在Google Chrome中测试过）。

<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function() {
    $("#navigation a").on("click", function(e){
        e.preventDefault();
        var currTab = $(this).data("tab");
        $(".panel").hide();
        $(currTab).fadeIn();
    sessionStorage.setItem("currentTab", currTab);
    });

    var currTab = sessionStorage.getItem("currentTab");
    $(".panel").hide();
    $(currTab).fadeIn();
});
</script>
<style type="text/css">
div {
   width: 700px;
   height: 500px;
   border: 10px solid #000;
}

div#home { background-color: green; }
div#link1 { background-color: lime; }
div#link2 { background-color: red; }
div#link3 { background-color: blue; }
div#link4 { background-color: yellow; }
div#link5 { background-color: white; }
</style>
</head>
<body>
<a href="http://www.google.com.br" />Go to google</a>
<ul id="navigation">
      <li><a data-tab="#home" href="/">Home</a></li>
      <li><a data-tab="#link1" href="/">Football</a></li>
      <li><a data-tab="#link2" href="/">Hockey</a></li>
      <li><a data-tab="#link3" href="/">Tennis</a></li>
      <li><a data-tab="#link4" href="/">Basketball</a></li>
      <li><a data-tab="#link5" href="/">Baseball</a></li>
</ul> 

<div class="panel" id="home"></div>
<div class="panel" id="link1"></div>
<div class="panel" id="link2"></div>
<div class="panel" id="link3"></div>
<div class="panel" id="link4"></div>
<div class="panel" id="link5"></div>


</body>
</html>

使用sessionStorage恢复页面（后退按钮）

1 个答案:

更新