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

Question

I am using session storage to save link content and image. 我正在使用会话存储来保存链接内容和图像。 It work but problem is with back button. 它工作但问题是后退按钮。 It doesn't work. 它不起作用。 It might resolve History API but support is horrible. 它可能会解决History API，但支持很糟糕。 No IE, Android support...Is there an alternative? 没有IE，Android支持......还有其他选择吗？ With sessionStorage i can not resolve it? 使用sessionStorage我无法解决它？ Here is code: 这是代码：

My links 我的链接

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

And JS (sessionStorage) 和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

Take a look at this article , it'll probably help you a lot! 看看这篇文章 ，它可能对你有很大的帮助！

Updated 更新

I've created this sample and it works with browser history for me (tested in Google Chrome). 我已创建此示例，它适用于我的浏览器历史记录（在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 个解决方案

解决方案1
3 2014-04-04 18:08:58

Updated 更新

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

问题描述

1 个解决方案

解决方案1 3 2014-04-04 18:08:58

Updated 更新

解决方案1
3 2014-04-04 18:08:58