tab选项卡切换后 刷新后保持当前选项卡页面

我采用了bootstrap3.0的选项卡组件
参考链接：bootstrap选项卡文档
使用前先引入bootstrap，引入方法：bootstrap如何引入
记得bootstrap使用前引入jquery

• 参考代码

<!--选项卡-->
<div>
    <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#sortType" aria-controls="home"
                role="tab" data-toggle="tab">Home</a></li>
        <li role="presentation"><a href="#sortTime" aria-controls="profile" role="tab"
                data-toggle="tab">Profile</a></li>

    </ul>
    <!-- Tab panes -->
    <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="sortType">1...</div>
        <div role="tabpanel" class="tab-pane" id="sortTime">2...</div>

    </div>
</div>

<script>
        $(document).ready(function () {
            $('.nav-tabs a').click(function (e) {
                e.preventDefault()
                $(this).tab('show')
            })
            $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
                sessionStorage.selectTab = $(e.target).attr('href');
            });
            var selectedTab = sessionStorage.selectTab;
            if (selectedTab) {
                $('.nav-tabs a[href="' + selectedTab + '"]').tab('show')
            }
        })
    </script>

试过session来存储，但是没有成功，就采用了sessionStorage来保留上一次的选项卡id。

在客户端存储数据

HTML5 提供了两种在客户端存储数据的新方法：

• localStorage - 没有时间限制的数据存储
• sessionStorage - 针对一个 session 的数据存储

1. sessionStorage 方法
   sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。

2. localStorage 方法
   localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。