对象sessionStorage是一次会话内的存储，它重要用于在一次会话内的多个页面内同享数据。

以下案例使用了vue.js,你须要相识vue.js。此案例会有两个文件：

touch a.html b.html

文件a.html内容为：

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <div id="app">
        <span>{{count}}</span><button @click="inc">+</button>
        <a href="b.html">go to B</a>
    </div>
    <script>
        // var s= localStorage
        var s= sessionStorage
        new Vue({
            el:'#app',
            data(){
                console.log(s.count)
                if (!s.count || (isNaN(s.count))){
                    s.count = 0
                    return {count:0}
                }
                else
                    return {count:s.count}
            },
            methods:{
                inc:function(){
                    this.count++
                    s.count = this.count
                }
            }
        })
    </script>
    

此文件的按钮点击一次，为span标签的值加一，而且设置新值到sessionStorage.count内。

文件b.html则担任显现当前的sessionStorage.count值：

    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
    <div id="app">
        <span>page A 's session value {{count}}</span>
        <a href="a.html">Back to A</a>
    </div>
    <script>
        // var s= localStorage
        var s= sessionStorage
        new Vue({
            el:'#app',
            data(){
                return {count:s.count}
            }
        })
    </script>
    

装置并启动http server

npm i http-server -g
http-server

接见localhost:8080/a.html ,我们点击按钮设置sessionStorage.count以后，导航到b页面，会发明显现的值是a页面内设置的值。这说明在同一个会话内的页面间是能够经由过程sessionStorage来同享数据的。

假如翻开一个新的页面，在接见b，显现的值就不能和a页面设置的雷同，这是由于新开的页面和本来的a页面的会话并不一致。假如须要在如许的情况下也能够接见，那末须要把sessionStorage改成localStorage。你无妨尝尝。