<p><code></p> <p>对象sessionStorage是一次会话内的存储,它主要用于在一次会话内的多个页面内共享数据。</p> <p>如下案例使用了vue.js,你需要了解vue.js。此案例会有两个文件:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="touch a.html b.html " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs css"><code><span class="hljs-selector-tag">touch</span> <span class="hljs-selector-tag">a</span><span class="hljs-selector-class">.html</span> <span class="hljs-selector-tag">b</span><span class="hljs-selector-class">.html</span> </code></pre> <p>文件a.html内容为:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <script src=&quot;https://unpkg.com/vue/dist/vue.js&quot;></script><br /> <script src=&quot;https://unpkg.com/vue-router/dist/vue-router.js&quot;></script></p> <div id=&quot;app&quot;> <span>{{count}}</span><button @click=&quot;inc&quot;>+</button><br /> <a href=&quot;b.html&quot;>go to B</a> </div> <p> <script> // var s= localStorage var s= sessionStorage new <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>({ 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(){ <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.count++ s.count = <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.count } } }) </script><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/vue/dist/vue.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/vue-router/dist/vue-router.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>{{count}}<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">button</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"inc"</span>&gt;</span>+<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"b.html"</span>&gt;</span>go to B<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-comment">// var s= localStorage</span> <span class="hljs-keyword">var</span> s= sessionStorage <span class="hljs-keyword">new</span> <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a>({ <span class="hljs-attr">el</span>:<span class="hljs-string">'#app'</span>, data(){ <span class="hljs-built_in">console</span>.log(s.count) <span class="hljs-keyword">if</span> (!s.count || (<span class="hljs-built_in">isNaN</span>(s.count))){ s.count = <span class="hljs-number">0</span> <span class="hljs-keyword">return</span> {<span class="hljs-attr">count</span>:<span class="hljs-number">0</span>} } <span class="hljs-keyword">else</span> <span class="hljs-keyword">return</span> {<span class="hljs-attr">count</span>:s.count} }, <span class="hljs-attr">methods</span>:{ <span class="hljs-attr">inc</span>:<span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>{ <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.count++ s.count = <span class="hljs-keyword">this</span>.count } } }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> </code></pre> <p>此文件的按钮点击一次,为span标签的值加一,并且设置新值到sessionStorage.count内。</p> <p>文件b.html则负责显示当前的sessionStorage.count值:</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text=" <script src=&quot;https://unpkg.com/vue/dist/vue.js&quot;></script><br /> <script src=&quot;https://unpkg.com/vue-router/dist/vue-router.js&quot;></script></p> <div id=&quot;app&quot;> <span>page A 's session value {{count}}</span><br /> <a href=&quot;a.html&quot;>Back to A</a> </div> <p> <script> // var s= localStorage var s= sessionStorage new <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>({ el:'#app', data(){ return {count:s.count} } }) </script><br /> " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/vue/dist/vue.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://unpkg.com/vue-router/dist/vue-router.js"</span>&gt;</span><span class="undefined"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>page A 's session value {{count}}<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"a.html"</span>&gt;</span>Back to A<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="actionscript"> <span class="hljs-comment">// var s= localStorage</span> <span class="hljs-keyword">var</span> s= sessionStorage <span class="hljs-keyword">new</span> Vue({ el:<span class="hljs-string">'#app'</span>, data(){ <span class="hljs-keyword">return</span> {count:s.count} } }) </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> </code></pre> <p>安装并启动http server</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm i http-server -g http-server " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs nginx"><code><span class="hljs-attribute">npm</span> i http-server -g http-server </code></pre> <p>访问localhost:8080/a.html ,我们点击按钮设置sessionStorage.count之后,导航到b页面,会发现显示的值是a页面内设置的值。这说明在同一个会话内的页面间是可以通过sessionStorage来共享数据的。</p> <p>如果打开一个新的页面,在访问b,显示的值就不能和a页面设置的相同,这是因为新开的页面和原来的a页面的会话并不一致。如果需要在这样的情况下也可以访问,那么需要把sessionStorage改为localStorage。你不妨试试。</p> <p></code></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_26941.html