关于swiper.js点击链接跳转后再次返回到轮播原位置的实现方法

人们都说：有100个人就有100种方式实现轮播效果。但是本人对移动端的滑屏事件不是太操作自如，所以就找了这个插件swiper.js。由于时间太紧张都没来得及仔细看它的API，现在看看太多了

需求是点击页面的其他链接跳转页面后，再次返回时，轮播的当前状态要和跳转前的一样。

html：

<!-- Swiper -->

<p class="swiper-container">

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

    </p>

</p> 

初始化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仅仅是为了在本地“存储”数据而生