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浏览器为例：

  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；

localStorage与sessionStorage区别的更多相关文章

  1. cookie、session、localStorage、sessionStorage区别

    cookie.session 会话(Session)跟踪是Web程序中常用的技术,用来跟踪用户的整个会话.常用的会话跟踪技术是Cookie与Session.Cookie通过在客户端记录信息确定用户身份 ...

  2. [javascript]localStorage和sessionStorage区别

    一.sessionStorage.localStorage.cookie可查看的位置,F12=>Application: 二.cookie .sessionStorage与localStorag ...

  3. Cookie、Session、localStorage、sessionStorage区别和用法

    Cookie 在学习一个新知识点前,我们应该明白自己的学习目标,要带着疑问去学习,该小节须要了解 Cookies 什么是cookie,cookie的作用 cookie的工作机制,即cookie是运作流 ...

  4. localStorage和sessionStorage区别

    localStorage和sessionStorage一样都是用来存储客户端临时信息的对象. 他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现) ...

  5. localStorage和sessionStorage区别(包括同源的定义)

    localStorage和sessionStorage一样都是用来存储客户端临时信息的对象. 他们均只能存储字符串类型的对象(虽然规范中可以存储其他原生类型的对象,但是目前为止没有浏览器对其进行实现) ...

  6. cookie,localStorage和sessionStorage区别

    三者的异同 特性 Cookie localStorage sessionStorage 数据的生命期 一般由服务器生成,可设置失效时间.如果在浏览器端生成Cookie,默认是关闭浏览器后失效 除非被清 ...

  7. cookie、localStorage和sessionStorage区别

    三者区别见下表: 说明: cookie的处理过程为: 服务器向客户端发送cookie 浏览器将cookie保存 之后每次http请求浏览器都会将cookie发送给服务器端 对于 cookie,我们还需 ...

  8. cookie和localstorage、sessionstorage区别

    cookie数据始终在同源的http请求中携带(即使不需要),即cookie在浏览器和服务器间来回传递.sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存. ...

  9. cookie、localstorage、sessionstorage区别

      localstorage sessionsorage cookie 大小 浏览器不能保存超过300个cookie,单个服务器不能超过20个,每个cookie不能超过4k 可以达到5M 可以达到5M ...

随机推荐

  1. （转载）Java内部类的使用小结

    原文摘自:http://android.blog.51cto.com/268543/384844/   内部类是指在一个外部类的内部再定义一个类.类名不需要和文件夹相同. *内部类可以是静态stati ...

  2. 【SqlServer系列】表单查询

    1   概述 如下几个问题,如果你能解决,请继续往下看,若不能解决,请先复习SQL基础知识,再来阅读本篇文章.本篇文章深度中等左右. Q1:表StudentScores如下,用一条SQL语句查询出每门 ...

  3. Dev控件学习-GridControl中的BandGridview导出多层行头操作

    BandGridview默认导出的是Columns的列头信息,而不是Bands的列头信息,为了实现导出多层行头.代码如下 public static void ExportExcel2(DevExpr ...

  4. Angular4 - Can't bind to 'ngModel' since it isn't a known property of 'input'.

    用[(ngModel)]="xxx"双向绑定,如:控制台报错:Can't bind to 'ngModel' since it isn't a known property of ...

  5. MongoDB的Windows安装

    一.下载MongoDB安装文件 下载地址:http://pan.baidu.com/s/1nvEuDD3 二.双击下载的文件,根据向导一直到finish.比如安装目录为 d:\mongodb 1.创建 ...

  6. Linux基础（四）

    一.系统监控 1.用top命令实时监测CPU.内存.硬盘状态 效果类似Windows的任务管理器,默认每5秒刷新一下屏幕上的显示结果. [root@localhost /]# top top - 17 ...

  7. WMvare桥接模式固定IP

    一.命令行固定IP 1.配置网卡IP地址 在命令行输入"vi /etc/sysconfig/network-scripts/ifcfg-eth0"#eth0为第一块网卡,如果是第二 ...

  8. DirectX 11---从空间变换来看3D场景如何转化到2D屏幕

    DirectX 11---从空间变换来看3D场景如何转化到2D屏幕 在看<Introduction to 3D Game Programming with DirectX 11>的时候,发 ...

  9. Ionic 安装创建项目

    在安装了node+Cordova的情况下(过程参考我之前的文章Phonegap环境配置),安装ionic: 安装ionic npm install -g ionic Android创建安装: npm ...

  10. linux查看是否安装Apache，mysql，python等

    1.Apache httpd -v service httpd start 启动 service httpd restart 重新启动 service httpd stop 停止服务 2.mysql ...