localStorage与sessionStorage区别

localStorage与sessionStorage区别：

浏览器正常模式下：

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

    
浏览器无痕浏览模式下：
    
    关闭窗口标签页，localStorage数据依然保存，但是sessionStorage数据会被清除。
    关闭浏览器，localStorage，sessionStorage数据均被清除。
    
cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。
    
    
交互打开情况：
    
在浏览器的正常模式下，再打开正常模式窗口，localStorage数据依然保存，但是sessionStorage数据会被清除。

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

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

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



测试代码 demo.html

 1 <!DOCTYPE HTML>
 2 <html>
 3   <body>
 4     <p id="localStorage"></p>
 5     <p id="sessionStorage"></p>
 6     <script>
 7         if (localStorage.pagecount){
 8             localStorage.pagecount=Number(localStorage.pagecount) +1;
 9 
10         }else{
11             localStorage.pagecount=1;
12         }
13         if (sessionStorage.pagecount){
14             sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
15         }else{
16             sessionStorage.pagecount=1;
17         }    
18         document.getElementById("localStorage").innerText="调用localStorage："+localStorage.pagecount+"次";
19         document.getElementById("sessionStorage").innerText="调用sessionStorage："+sessionStorage.pagecount+"次";
20     </script>
21 </body>
22 </html>

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

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




posted @ 2017-08-16 17:06  *水月*  阅读(1656)  评论(0)  编辑  收藏  举报