如何使swiper.js在页面返回时保持原来状态

Question

页面中含有swiper.js,当点击第3个块的标签，跳转到下一个页面，下一个页面返回时，原来的页面中已经不是第3块了，而是第1块，我希望时他还能是第3块，同时上面的tab也是对应的第三块。

还是回到了回来状态，但是我希望它是这样的

使用了sessionStorage 就会报错

window.onload = function() {

    $(".tabs").find("a").eq(0).addClass("active");

    var index=0;
    if(sessionStorage.getItem("index")){
        index=sessionStorage.getItem("index");
    }
    //点击页面链接跳转前保存导航当前的index值
    $("a").bind("click",function(){
        var i= $(".swiper-slide-active").index();
        sessionStorage.setItem("index",i);
    });

    var tabsSwiper = new Swiper('#tabs-container',{
        speed:500,
        initialSlide: index,
        onSlideChangeStart: function(){
            $(".tabs .active").removeClass('active');
            $(".tabs a").eq(tabsSwiper.activeIndex).addClass('active')
        }
    });

    $(".tabs a").on('touchstart mousedown',function(e){
        e.preventDefault();
        $(".tabs .active").removeClass('active');
        $(this).addClass('active');
        tabsSwiper.slideTo( $(this).index());
    });
    $(".tabs a").click(function(e){
        e.preventDefault()
    });
}

Answer 1

嗯，每次进入页面都是一次新的访问，所以都是初始化状态。达到这个要求你需要一个地方记录swiper的index，你可以使用sessionStorage;