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. 从栈不平衡问题 理解 calling convention

    最近在开发的过程中遇到了几个很诡异的问题,造成了栈不平衡从而导致程序崩溃. 经过几经排查发现是和调用规约(calling convention)相关的问题,特此分享出来. 首先,讲一下什么是调用规约. ...

  2. MySQL二进制日志备份和恢复详解

    原文链接:http://www.showerlee.com/archives/681 ****经实践,该教程ok,特在此分享**** 基本概念 定义: 二进制日志包含了所有更新了数据或者已经潜在更新了 ...

  3. mysql主从数据库设置备忘

    [mysqld] binlog-do-db = databasename1 binlog-do-db = databasename2 binlog-do-db = databasename3 -- 且 ...

  4. 使用boost/property_tree进行XML操作

    之前一直用tinyxml来进行XML文件操作,刚刚接触的一个测试项目是使用boost操作的,虽然不清楚这两者的差异,但boost使用起来还挺方便的,所以简单整理一些关于boost解析和创建XML文件的 ...

  5. C++第二篇--访问控制

    C++第二篇--访问控制 1. 引入 上一篇博文中从结构体引到了类,类当中不仅有数据成员还有一些函数,这些函数被称为成员函数.今天介绍新的内容,类当中的访问控制. 2. 访问控制 当你不添加任何声明, ...

  6. AllPairs运用遇到的问题及解决办法分享

    前些天用AllPairs自动生成了交互式测试用例,中间遇到的问题困扰了一天,最后解决了.现在分享下解决过程 首先,D\AllPairs是我的ALLPairs安装目录,C盘桌面test.txt是我写的测 ...

  7. cocos 射线检测 3D物体 (Sprite3D点击)

    看了很多朋友问怎么用一个3D物体做一个按钮,而且网上好像还真比较难找到答案, 今天翻了一下cocos源码发现Ray 已经封装了intersects函数,那么剩下的工作其实很简单了, 从屏幕的一个poi ...

  8. python之总体理解

    作为脚本,python具备了弱类型语言的灵活性,便捷性.这在日常的开发使用中能够大幅度的减轻开发人员的编码负担,开发者也能够将精力集中在程序的逻辑管理和总体构架设计上.一般而言,随着经验的积累,开发人 ...

  9. centos7 ssh免密码登录

    单机测试 1,设置/etc/hosts 添加主机及ip 2,修改/etc/sysconfig/network NETWORKING=yesNETWORING_IPV6=yesHOSTNAME=mast ...

  10. (转)mybatis常用jdbcType数据类型

    1 MyBatis 通过包含的jdbcType类型 BIT FLOAT CHAR TIMESTAMP OTHER UNDEFINED TINYINT REAL VARCHAR BINARY BLOB ...