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

【问题标题】：Restoring page (back button) with sessionStorage使用 sessionStorage 恢复页面（后退按钮）
【发布时间】：2014-05-17 04:24:28
【问题描述】：

我正在使用会话存储来保存链接内容和图像。它可以工作，但问题在于后退按钮。它不起作用。它可能会解析 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;

【问题讨论】：

标签： javascript css back-button session-storage web-storage

【解决方案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>

【讨论】：

所以historyAPI可能是唯一的意见如何修复后退按钮？
你把这个JS放在哪里？
在 Angular 中导航返回时，sessionStorage 是恢复某些参数的最佳方法吗？