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. SequoiaDB x Spark 新主流架构引领企业级应用

    6月,汇集当今大数据界精英的Spark Summit 2017盛大召开,Spark作为当今最炙手可热的大数据技术框架,向全世界展示了最新的技术成果.生态体系及未来发展规划. 巨杉作为业内领先的分布式数 ...

  2. 2017寒假零基础学习Python系列之函数之 定义默认参数

    在定义函数时,可以有默认参数例如Python自带的函数int(),其实就是两个参数,我们既可以传一个参数,又可以传两个参数 int(') >>>123 int(',8) 83 int ...

  3. CharacterEncodingFilter -处理字符格式

    package com.pb.news.web.filter; import java.io.IOException;import javax.servlet.Filter;import javax. ...

  4. Struts框架之 执行流程 struts.xml 配置详细

    1.执行流程 服务器启动: 1. 加载项目web.xml 2. 创建Struts核心过滤器对象, 执行filter  →  init()   struts-default.xml,    核心功能的初 ...

  5. CJOJ 1494 【网络流24题】 搭配飞行员（二分图最大匹配）

    CJOJ 1494 [网络流24题] 搭配飞行员(二分图最大匹配) Description 飞行大队有若干个来自各地的驾驶员,专门驾驶一种型号的飞机,这种飞机每架有两个驾驶员,需一个正驾驶员和一个副驾 ...

  6. Spark 2.2.0 文档中文版 Quick Start

    原地址:http://spark.apache.org/docs/latest/quick-start.html 这篇指导对使用Spark提供了一个快速的介绍.我们首先介绍API,通过spark交互式 ...

  7. Nancy基于JwtBearer认证的使用与实现

    前言 最近在看JSON Web Token(Jwt)相关的东西,但是发现在Nancy中直接使用Jwt的组件比较缺乏,所以就在空闲时间写了一个. 这个组件是开源的,不过目前只支持.NET Core,后续 ...

  8. GitHub转华为软件开发云详细教程

    一.复制GitHub的代码库地址 首先,打开Github网页,找到要迁移的代码仓库地址,如下: 点击Clone or Download,出现以下界面 点击Copy toclipboard(复制到粘贴板 ...

  9. if __name__ == '__main__' 如何正确理解

    今天有个初学Python 的朋友问我这个问题,他说在网上好多回答他都不太理解.所以这里我来做说一下,希望能把这个问题说明白. 先举一个例子:假设我们有一个add.py文件,里面的代码是这样: def ...

  10. LInux挂载windows共享磁盘

    #!/bin/sh #进行windows paths目录同步 cd /mnt str="//10.33.4.199/linux" result=$(df | grep ${str} ...