关于H5中存储sessionStorage的一些用法

Posted 2020-11-14 zhaoff

最近在用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()
})