最近在用H5做一個項目。其中有一個需求是在tab欄列表頁點擊列表數據進入詳情頁，當點擊詳情頁的返回按鈕時能夠返回列表頁並且不刷新數據同時還要保留原tab欄的狀態。然後就開始想出一系列想法~~

在這裏先說一下sessionStorage的用法:

1、setItem存儲value:（代碼示例）

sessionStorage.setItem("key", "value");//sessionStorage.setItem("name", "zhansan");

2、getItem獲取value：（代碼示例）

var value = sessionStorage.getItem("key"); //var name = localStorage.getItem("name")

說明一點sessionStorage的特性：本地存儲，關閉瀏覽器的時候，數據就會被清除，如果你想要用它做到頁面之間傳值的話，需要用到a鏈接，不然是取不到數據的，你可以自己去試試~

再來說一下上面的需求怎樣解決呢？

解決辦法：

列表頁tab欄的狀態可用sessionStorage存儲
var hash = sessionStorage.setItem("status‘,hash)；
...
...
hash= sessionStorage.getItem(‘status‘)
if(hash==0){
  $("li").addClass(‘active‘).sibings().removeClass("active")
}else if(hash==1){
  $("li").addClass(‘active‘).siblings().removeClass(‘acctive‘);
}else if(hash==2){
  ...
}

在tab列表頁給數據添加a鏈接到你要跳轉的頁面，點擊返回按鈕的時候使用瀏覽器的返回api

$(".arrow").on("click",function () {
    window.history.back()
})

關於H5中存儲sessionStorage的一些用法