swiper.js 點擊鏈接跳轉后再次返回到輪播原位置

人們都說：有100個人就有100種方式實現輪播效果。但是本人對移動端的滑屏事件不是太操作自如，所以就找了這個插件swiper.js。由於時間太緊張都沒來得及仔細看它的API，現在看看太多了
需求是點擊頁面的其他鏈接跳轉頁面后，再次返回時，輪播的當前狀態要和跳轉前的一樣。
html：

 

<!-- Swiper -->

<div class="swiper-container">

    <div class="swiper-wrapper">

        <!--當前狀態的 class="swiper-slide swiper-slide-active"-->

        <a href="javascript:;" class="swiper-slide">投資人請簽署以下四份協議人請簽署以下四份協議</a>

        <a href="javascript:;" class="swiper-slide">人請簽署以下四份協議</a>

        <a href="javascript:;" class="swiper-slide">項目名稱投資人請簽署以下四份協議人請簽署以下四份</a>

        <a href="javascript:;" class="swiper-slide">項目名稱項目名稱</a>

    </div>

</div> 

 

 

初始化swiper.js：

 

    

var swiper = new Swiper('.swiper-container', {

     nextButton: '.swiper-button-next',

     prevButton: '.swiper-button-prev',

     slidesPerView: 3,

     centeredSlides: true

});

 

 

思路1：第一反應是只要給輪播內容設置為當前狀態就好了，可是swiperJS有個初始設置，而且除了當前狀態改變了class之外，前后也要改變class，無法實現。
思路2：把跳轉前的輪播內容html保存到本地，sessionStorage("html",輪播內容html)，當返回時判斷本地是否有數據，如果有就渲染本地內容，如果沒有就還按初始狀態渲染
想法挺好，就是實現不了哈哈，原因：如果放到new swiper()之前，那么new swiper()就又會把html初始化；放到后面的話，new時獲取不到內容，兩邊的箭頭及輪播滑動都會被禁用。失敗
解決方法：
運用HTML5的sessionStorage，跳轉前先保存當前的index值，初始化new swiper()時添加initialSlide: index就可以了，判斷index的值就可以了，代碼如下：

 

   

//初始化swiper

     var index=0;

     if(sessionStorage.getItem("index")){

        index=sessionStorage.getItem("index");

     }

     var swiper = new Swiper('.swiper-container', {

        nextButton: '.swiper-button-next',

        prevButton: '.swiper-button-prev',

        initialSlide: index,//設定初始化時slide的索引

        centeredSlides: true

     });

        //點擊頁面鏈接跳轉前保存導航當前的index值

     $("a").bind("click",function(){

       var i= $(".swiper-slide-active").index();

        sessionStorage.setItem("index",i);

     })

 

 

HTML5新增的本地存儲API也是蠻好用的哦（除了IE7及以下不支持外，其他標准瀏覽器都完全支持），下面說說HTML5的Web Srorage與Cookie的區別。
HTML5中的web storage包括兩種方式：sessionStorage和localStorage.
sessionStorage用於本地存儲一個會話（session）中的數據，這些數據只有在同一個會話中的頁面才能訪問並且當會話結束后數據也隨之銷毀。因此sessionStorage不是一種持久化的本地存儲，僅僅是會話級別的存儲。
而localStorage用於持久化的本地存儲，除非主動刪除數據，否則數據是永遠不會過期的。
web storage和cookie的區別
Web Storage的概念和cookie相似，區別是它是為了更大容量存儲設計的。Cookie的大小是受限的，並且每次你請求一個新的頁面的時候Cookie都會被發送過去，這樣無形中浪費了帶寬，另外cookie還需要指定作用域，不可以跨域調用。
除此之外，Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie需要前端開發者自己封裝setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是與服務器進行交互，作為HTTP規范的一部分而存在 ，而Web Storage僅僅是為了在本地“存儲”數據而生