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. 在ubuntu14.04上安装mono4.4 + jexus + mvc6

    0.准备工作 在/usr下建立一个文件夹,方便管理源码 cd /usr mkdir opensource cd opensource 安装vim(文本编辑器,不习惯用vim可以换成其他的) apt-g ...

  2. CharacterEncodingFilter -处理字符格式

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

  3. Mac之OS系统下搭建JavaEE环境 <四> 之IntelliJ IDEA 的内存优化

    1.代开IntelliJ IDEA 的显示内容 2. 打开idea.vmoptions文件 路径为Contens——bin——idea.vmoptions 修改之前会复制一份备份原配置 原配置 修改后 ...

  4. (cljs/run-at (JSVM. :all) "一次说白DataType、Record和Protocol")

    前言  在项目中我们一般会为实际问题域定义领域数据模型,譬如开发VDOM时自然而言就会定义个VNode数据类型,用于打包存储.操作相关数据.clj/cljs不单内置了List.Vector.Set和M ...

  5. html5 audio play()方法部分ios机不能播放声音

    前几天遇到了一个很奇葩的问题:执行audio.play方法,浏览器.安卓.部分ios可正常播放,部分ios不能播放部分声音,这就奇怪了. 我的第一反应是: 音频文件有问题  -- 写了一个domo验证 ...

  6. 深入浅析JavaScript中的constructor

    constructor 属性返回对创建此对象的数组函数的引用.本文给大家介绍JavaScript中的constructor ,需要的朋友参考下吧 定义和用法 constructor 属性返回对创建此对 ...

  7. HTTP消息中Header头部信息整理

    1.HTTP请求方式 GET 向Web服务器请求一个文件 POST 向Web服务器发送数据让Web服务器进行处理 PUT 向Web服务器发送数据并存储在Web服务器内部 HEAD 检查一个对象是否存在 ...

  8. Ambari安装之部署 （Metrics Collector和 Metrics Monitor） Install Pending ...问题

    问题的由来 我这里,是因为,拿这个Ambari Metrics服务在做试验!所以先删除它,再添加它,出现了安装被挂起的问题.... Am bari里如何删除某指定的服务(图文详解) 问题详细描述如下: ...

  9. 【学习笔记】C# 构造和析构

    构造方法 构造方法是一个特殊的方法,负责初始化对象 构造方法名必须和类名一致 构造方法没有返回值,但可以有参数,能够重载 构造方法可以不写,系统会自动为类添加一个无参的默认构造 如果将构造方法设置为P ...

  10. CocoaPods私有库管理

    简介: 前一篇文章已经介绍过如果安装使用CocoaPods,下面将要介绍如果通过CocoaPods和git来维护我们私有的库. 个人或公司在开发过程中,会积累很多可以复用的代码包,有些我们不想开源,又 ...