Javascript 使用会话存储还原页面（后退按钮）_Javascript_Css_Back Button_Session Storage_Web Storage

Javascript 使用会话存储还原页面（后退按钮）

javascript css

Javascript 使用会话存储还原页面（后退按钮）,javascript,css,back-button,session-storage,web-storage,Javascript,Css,Back Button,Session Storage,Web Storage,我正在使用会话存储来保存链接内容和图像。它可以工作，但问题是后退按钮。它不起作用。它可能会解析历史API，但支持非常糟糕。没有IE，Android支持…还有其他选择吗？用sessionStorage我不能解决吗？以下是代码：我的链接 <li><a data-tab="#home" href="#home">Home</a></li> <li><a data-tab="#link1" href="#foot

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

看看，它可能会帮你很多忙

更新我创建了这个示例，它可以与我的浏览器历史记录一起使用（在Google Chrome中测试）


$（函数（）{
$（“#导航a”）。在（“单击”上，功能（e）{
e、 预防默认值（）；
var currTab=$（this）.data（“tab”）；
$（“.panel”）.hide（）；
$（currTab.fadeIn（）；
setItem（“currentTab”，currTab）；
});
var currTab=sessionStorage.getItem（“currentTab”）；
$（“.panel”）.hide（）；
$（currTab.fadeIn（）；
});
div{
宽度：700px；
高度：500px；
边框：10px实心#000；
}
div#home{背景色：绿色；}
div#link1{背景色：石灰；}
div#link2{背景色：红色；}
div#link3{背景色：蓝色；}
div#link4{背景色：黄色；}
div#link5{背景色：白色；}

所以historyAPI可能是唯一的意见如何修复后退按钮？你把这个JS放在哪里？当导航bavck时，

会话存储是恢复某些参数的最佳方法吗？
$("#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;

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