localStorage与sessionStorage区别

localStorage与sessionStorage区别：

浏览器正常模式下：

关闭浏览器或该窗口标签时，localStorage数据依然保存，但是sessionStorage数据会被清除。

浏览器无痕浏览模式下：

   关闭窗口标签页，localStorage数据依然保存，但是sessionStorage数据会被清除。
   关闭浏览器，localStorage，sessionStorage数据均被清除。

cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。


交互打开情况：

在浏览器的正常模式下，再打开正常模式窗口，localStorage数据依然保存，但是sessionStorage数据会被清除。

在浏览器的正常模式下，再打开无痕浏览模式窗口，这时候只要有无痕浏览窗口存在，localStorage就是上次无痕浏览模式下的localStorage，但是sessionStorage依旧被清除。类似在无痕浏览模式下，打开一个新的无痕标签页。否则，就是两者数据都清除。

在浏览器的无痕浏览模式下，再打开正常模式窗口，这时候localStorage是上一次正常模式下的localStorage，但是sessionStorage依旧被清除。类似在正常模式下，打开一个新的正常模式标签页或者重新打开浏览器。

在浏览器的无痕模式下，再打开无痕浏览器窗口，localStorage数据依然保存，但是sessionStorage数据会被清除。

测试代码 demo.html

 <!DOCTYPE HTML>

 <html>

   <body>

     <p id="localStorage"></p>

     <p id="sessionStorage"></p>

     <script>

         if (localStorage.pagecount){

             localStorage.pagecount=Number(localStorage.pagecount) +1;

         }else{

             localStorage.pagecount=1;

         }

         if (sessionStorage.pagecount){

             sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;

         }else{

             sessionStorage.pagecount=1;

         }

         document.getElementById("localStorage").innerText="调用localStorage："+localStorage.pagecount+"次";

         document.getElementById("sessionStorage").innerText="调用sessionStorage："+sessionStorage.pagecount+"次";

     </script>

 </body>

 </html>

先清除浏览器之前的浏览数据
以google浏览器为例：

打开demo.html,会发现localStorage与sessionStorage均为1；
打开一个空标签页，关闭demo.html标签页，重新打开demo.html，localStorage为2，sessionStorage为1；
关闭浏览器，再次打开demo.html，localStorage为3，sessionStorage为1；
刷新当前标签页，localStorage为4，sessionStorage为2；
打开隐身窗口，打开demo.html，localStorage与sessionStorage均为1；
在隐身窗口下，打开一个空标签页，关闭demo.html标签页，重新打开demo.html，localStorage为2，sessionStorage为1；
关闭隐身窗口，再次用隐身窗口打开demo.html，localStorage与sessionStorage均为1；
在隐身窗口下，刷新当前标签页，localStorage与sessionStorage均为2；
在当前隐身窗口打开正常窗口，打开demo.html，localStorage为5，sessionStorage为1；
在当前正常窗口打开隐身窗口，打开demo.html，localStorage为3，sessionStorage为1；

秒客网

localStorage与sessionStorage区别

相关文章