移动端轮播图插件--window.sessionStorage(数据)--window.localStorage

一、移动端轮播图插件

www.swiper.com.cn

www.superslide.com

www.icsroll.com

www.bootcss.com

三步解决掉：css，js，index

二、window.sessionStorage(数据)

（1）生命周期为关闭浏览器

（2）在同一个窗口（页面）下数据可以共享

（3）以键值对的形式储使用

1.sessionStorage.setItem('key', val);//存储数据;

2.sessionStorage.getItem('key');//获取数据;

3.sessionStorage.removeItem('key');//删除数据;

4.sessionStorage.clear();//删除所有数据;

语法：

 <input type="text">

    <button class="set">储存数据</button>

    <button class="get">获取数据</button>

    <button class="remove">删除数据</button>

    <button class="del">清空所有数据</button>

    <script>

        var ipt = document.querySelector('input');

        var set = document.querySelector('.set');

        var get = document.querySelector('.get');

        var remove = document.querySelector('.remove');

        var del = document.querySelector('.del');

        set.addEventListener('click', function() {

            var val = ipt.value;

            sessionStorage.setItem('uname', val);

            sessionStorage.setItem('pwo', val);

        })

        get.addEventListener('click', function() {

            console.log(sessionStorage.getItem('uname'));

        })

        remove.addEventListener('click', function() {

            sessionStorage.removeItem('uname');

        })

        del.addEventListener('click', function() {

            sessionStorage.clear();

        })

    </script>

三、window.localStorage

跟window.sessionStorage使用语法都是一样的。

不同的是：

（1）.生命周期永久生效，除非手动删除 否则关门页面也会存在

（2）.可以多窗口（页面）共享（同一浏览器可以共享）

（3）.以键值对的形式储使用