sessionStorage什么时候失效

最近在调试程序的时候无意间看到 cookie 的过期时间是 session，这个 session 表示的是什么时候过期？牵扯出来另一个存储方案 sessionStorage 存储的数据又是什么时候过期呢？

在查找相关资料的时候总会看到会话结束的时候 cookie 会被清除，当然 sessionStorage 内的数据也会在会话结束的时候被清除。

问题又来了会话是什么？会话什么时候会结束？

暂时抛开这些问题，看看 sessionStorage 是怎么使用，和之前的持久化存储方案 cookie 有什么不同。

Storage

Storage 是 Web Storage API 的接口，localStorage 和 sessionStorage 都实现了这个接口，所以这两个对象都有这个接口定义的属性和方法。

  • Storage.length：只读 存储的数据项数量

  • Storage.key(n: number)：返回存储的第 n 个键名

  • Storage.getItem(key: string)：返回 key 对应的值

  • Storage.setItem(key: string, value: string)：存储键和值，如果存在则更新

  • Storage.clear()：清空存储的所有数据

Storage 和 cookies

cookielocalStoragesessionStorage
随 HTTP 发送是否否
最大数据量4K5M5M
失效时机自己定义 或 随着会话断开失效不清除不失效随着会话断开失效
跨域限制是是是

下面是 MDN 对 sessionStorage 的描述：

sessionStorage 属性允许你访问一个，对应当前源的 session Storage 对象。它与 localStorage 相似，不同之处在于 localStorage 里面存储的数据没有过期时间设置，而存储在 sessionStorage 里面的数据在页面会话结束时会被清除。

页面会话在浏览器打开期间一直保持，并且重新加载或恢复页面仍会保持原来的页面会话。

在新标签或窗口打开一个页面时会复制顶级浏览会话的上下文作为新会话的上下文，这点和 session cookies 的运行方式不同。

打开多个相同的 URL 的 Tabs 页面，会创建各自的 sessionStorage。

关闭对应浏览器窗口（Window）/ tab，会清除对应的 sessionStorage。

上面的内容引用自MDN Window.sessionStorage

对于以上的引用内容有如下问题：

什么是会话？

我理解会话是两个实体之间的交流，交流是一个过程，无论从时间还是从内容都会表现成一个过程，一段时间。例如：从输入账户密码进入系统到退出系统就是一次会话的完成。TCP 的三次握手也创建了一次会话，TCP 四次挥手关闭连接则关闭了会话。

重新加载或恢复页面，什么是恢复页面？

恢复页面就是浏览器窗口/tab 手动关闭或者意外关闭都是可以恢复的，恢复之后这个页面的会话也会随之恢复。前提是浏览器程序没有被退出，如果程序被退出了无论是手动退出还是意外退出 session storage 和 session cookies 都会被清除。

在新标签或窗口打开页面，是在哪里打开的新窗口或页面？复制顶级浏览会话，之后两个会话就没有联系了吗？

这里的打开新的标签/窗口指的是在当前页面触发的动作导致新窗口/tab 的打开。复制而来的会话（session storage）和之前的会话没有联系。

和 session cookies 的运作方式不同，session cookies 的运作方式是什么？

session cookies 的运作方式不是复制，不同窗口/tab 同一域操作的 cookies 是同一个。

加载别的页面是否算是会话结束？

不算会话结束，因为当前 tab 再次加载对应的 url 的时候还是可以访问到对应的 sessionStorage。

为了解答上面的问题，我的尝试如下：

  1. 在域 http://www.xx.com:80 下写入数据sessionStorage.setItem('a', 1)

  2. 关闭当前 tab/窗口（保持浏览器程序没有退出）

  3. 历史记录 -> 最近关闭的 tab -> 刚才关闭的 tab

  4. sessionStorage.getItem('a')可以得到"1"

表明恢复的标签和之前的标签共享一个会话，因为它们是同一个标签

  1. 当前标签加载其它域名例如 http://jd.com

  2. 在回来 http://www.xx.com:80 这时候可以通过 sessionStorage.getItem('a')得到值"1"

表明同一个标签同一个域会共享会话

  1. 在当前页面通过链接 <a rel="opener" target='_blank' href='http://www.xx.com:80'>打开</a> 。（注意这里的ref属性，一定要加上，缺省则不会有效）

  2. 在新开的 tab 下sessionStorage.getItem('a')可以得到得到值"1"

  3. 在新开的 tab 下sessionStorage.setItem('a', 2)

  4. 在原来的 tab 下sessionStorage.getItem('a')得到的还是 1

表明从当前域打开新的 tab/窗口会复制当前的会话作为新开页面的会话，因为是复制出来的，两个会话之间没有关联

  1. 关闭浏览器程序

  2. 再次打开浏览器，并且恢复 tab（不是新开 tab 打开同域页面）

  3. sessionStorage.getItem('a')得到的是 null 而不是"1"

表明关闭浏览器程序会结束会话

session cookies的失效

和 sessionStorage 的尝试一致，对于 cookie 的过期时间是 session 也做了如上尝试，得出的结论如下：

在浏览器关闭的情况下 session cookies 才会被清除，只是关闭相关 tab session cookies 还是存在，在此打开对应域的链接还是会看到相应cookies。

补充

  1. 对于rel="noopener"的a标签打开的链接不会复制opener的sessionStorage，
    参考Feature: Stop cloning sessionStorage for windows opened with noopener。
  2. 近期chrome浏览器修改了a标签rel属性缺省的默认值为noopener，参考Feature: Anchor target=_blank implies rel=noopener by default。
  3. 关于a标签的rel属性可以参数考HTML attribute: rel

参考

MDN Window.sessionStorage

MDN Storage

HTTP 会话原理解释与应用

sessionStorage 你可能会忽略的细节

实际中使用 Javascript 中 sessionStorage 的注意事项

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/361966.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

ES6 解构赋值详解

ES6 解构赋值详解

解构赋值是对赋值运算符的扩展&#xff0c;可以将属性/值从对象/数组中取出&#xff0c;赋值给其他变量。 一、数组的解构赋值 1、基本用法 只要等号两边的模式相同&#xff0c;左边的变量就会被赋予对应的值。 let [a, [[b], c]] [1, [[2], 3]]; a // 1 b // 2 c // 3 let [a…
阅读更多...
软件著作权申请流程

软件著作权申请流程

一、填写计算机软件著作权登记申请表&#xff08;表格1份&#xff09;包括软件全称、简称、版本号、开发完成日期、软件开发情况&#xff08;独立开发、合作开发、委托开发、下达任务开发&#xff09;、原始取得权利情况、继受取得权利情况、权利范围、软件用途和技术特点&…
阅读更多...
Npm install failed with “cannot run in wd”

Npm install failed with “cannot run in wd”

Linux环境下&#xff0c;root账户&#xff0c;安装某些npm包的时候报下面的错误&#xff0c;例如安装grunt-contrib-imagemin时&#xff1a; Error: EACCES, mkdir /usr/local/lib/node_modules/coffee-scriptnpm ERR! { [Error: EACCES, mkdir /usr/local/lib/node_modules/c…
阅读更多...
Java EE 7 Batch中传递属性/参数的2种方式

Java EE 7 Batch中传递属性/参数的2种方式

对于Java EE 7批处理工具&#xff0c;有两种将属性/参数传递给块和批处理的方法。 本快速指南向您展示了两种方式&#xff0c;在开发批处理Java EE 7方式时可能会经常使用它们。 1.运行前预定义的属性/参数 预定义属性是您在部署应用程序之前定义的属性&#xff08;名称/值对&…
阅读更多...
Csharp 打印Word文件默認打印機或選擇打印機設置代碼

Csharp 打印Word文件默認打印機或選擇打印機設置代碼

//打印文檔object nullobj Missing.Value;//aDoc wordApp.Documents.Open(ref file,// ref nullobj, ref nullobj, ref nullobj,// ref nullobj, ref nullobj, ref nullobj,// ref nullob…
阅读更多...
ESLint共享配置的两种方式eslint-plugin和eslint-config

ESLint共享配置的两种方式eslint-plugin和eslint-config

使用ESLint很久了&#xff0c;也看了ESLint官方文档很多遍&#xff0c;但对于ESLint配置的规则还是不胜清楚&#xff0c;例如&#xff1a; {"extends": ["plugin:prettier/recommended"] }上面extends的值为什么要"plugin:"开头&#xff1f;这里…
阅读更多...
使用aggregate在MongoDB中查找重复的数据记录

使用aggregate在MongoDB中查找重复的数据记录

我们知道&#xff0c;MongoDB属于文档型数据库&#xff0c;其存储的文档类型都是JSON对象。正是由于这一特性&#xff0c;我们在Node.js中会经常使用MongoDB进行数据的存取。但由于Node.js是异步执行的&#xff0c;这就导致我们无法保证每一次的数据库save操作都是原子型的。也…
阅读更多...
Gradle入门：创建二进制分发

Gradle入门：创建二进制分发

创建有用的应用程序之后&#xff0c;很可能我们想与其他人共享它。 一种方法是创建一个可以从我们的网站下载的二进制发行版。 这篇博客文章描述了如何满足以下要求的二进制发行版&#xff1a; 我们的二进制分发绝对不能使用所谓的“胖子”方法。 换句话说&#xff0c;我们的…
阅读更多...
我的Google Adsense帐户被关

我的Google Adsense帐户被关

一、 上周四&#xff0c;我收到Google的邮件&#xff0c;宣布关闭我的Adsense帐户。 "您好&#xff01; 查看了相关记录后&#xff0c;我们确认您的 AdSense 帐户存在引起无效活动的风险。保护 AdWords 广告客户&#xff0c;使其免受无效活动的侵害是我们的责任&#xff0…
阅读更多...
网格布局之网格元素放置算法

网格布局之网格元素放置算法

接下来的网格元素放置算法将网格元素的自动位置解析为确定位置&#xff0c;确保每个网格元素具有布局明确的网格区域。&#xff08;Grid spans 不需要特别的解析&#xff1b;如果没有明确指定&#xff0c;默认是1&#xff09; 注意&#xff1a;当显式网格中没有位置放置自动放置…
阅读更多...
csharp: ODP.NET,System.Data.OracleClient(.net 4.0) and System.Data.OleDb读取Oracle g 11.2.0的区别...

csharp: ODP.NET,System.Data.OracleClient(.net 4.0) and System.Data.OleDb读取Oracle g 11.2.0的区别...

ODP.NET: 引用&#xff1a; using Oracle.DataAccess; //Oracle g 11.2.0 using Oracle.DataAccess.Client; using Oracle.DataAccess.Types; //下载 http://www.oracle.com/technetwork/topics/dotnet/downloads/net-downloads-160392.html //引用&#xff1a;D:\app\geovindu…
阅读更多...
AngularJS快速入门指南15：API

AngularJS快速入门指南15：API

API即Application Programming Interface&#xff08;应用程序接口&#xff09;。 AngularJS全局API AngularJS全局API是一组全局JavaScript函数&#xff0c;用来进行一些常用的操作&#xff0c;例如&#xff1a; 比较两个对象迭代对象进行数据格式转换 全局API函数可以通过an…
阅读更多...
Java 9幕后花絮：新功能从何而来？

Java 9幕后花絮：新功能从何而来？

找出Java幕后发生的事情&#xff0c;以及新功能如何实现 在上一篇文章中&#xff0c;我们介绍了即将发布的Java 9版本的新功能和尚待解决的功能&#xff0c;并简要提到了将新功能添加到下一个版本之前要经历的过程。 由于此过程几乎影响了所有Java开发人员&#xff0c;但大多数…
阅读更多...
TypeScript 联合类型(union type)

TypeScript 联合类型(union type)

TS是JS的超集&#xff0c;在JS的基础上添加了一套类型系统&#xff0c;这样的TS可以被静态分析带来的好处显而易见。 let val: string val;声明一个string类型的变量val。 let val: string val; val 1; // Type number is not assignable to type string.因为number类型和…
阅读更多...
sudo apt-get install libstdc++6

sudo apt-get install libstdc++6

sudo apt-get install libstdc6 yum install libncurses.so.5 sudo apt-get install libncurses.so.5 sudo apt-get install lib32ncurses5 apt-get update把源更新一下 使用gdb时的指令 (gbd) info line *0x08xxxx sudo apt-get install lib32z1 lib32ncurses5 lib32bz2-1.…
阅读更多...
AngularJS快速入门指南03：表达式

AngularJS快速入门指南03：表达式

AngularJS通过表达式将数据绑定到HTML。 AngularJS表达式 AngularJS表达式写在双大括号中&#xff1a;{{ 表达式语句 }}。 AngularJS表达式绑定数据到HTML的方式与ng-bind指令的方式相同。 AngularJS会准确地将表达式“输出”为计算的结果。 AngularJS表达式与JavaScript表达式…
阅读更多...
零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践

零基础快速上手HarmonyOS ArkTS开发2---ArkTS开发实践

ArkTS开发实践&#xff1a; 接着上一次零基础快速上手HarmonyOS ArkTS开发1---运行Hello World、ArkTS开发语言介绍继续&#xff0c; 在上一次对于ArkTS的基础知识进行了学习&#xff0c;依照官方的课程计划&#xff0c;还有两个具体的小案例需要来实践实践&#xff1a; 实践出…
阅读更多...
无状态Spring安全性第2部分：无状态身份验证

无状态Spring安全性第2部分：无状态身份验证

Spring Stateless Security系列的第二部分是关于以无状态方式探索身份验证的方法。 如果您错过了CSRF的第一部分&#xff0c;可以在这里找到。 因此&#xff0c;在谈论身份验证时&#xff0c;其全部内容就是让客户端以可验证的方式向服务器标识自己。 通常&#xff0c;这始于服…
阅读更多...
TypeScript 交叉类型(intersection type)

TypeScript 交叉类型(intersection type)

在TS中和联合类型(union type)对应的还有交叉类型(intersection type)。 交叉类型的出现主要为了组合多个对象类型(object type)&#xff0c;因为相对于interface&#xff0c;object type没法继承&#xff0c;那么就可以通过union type来实现混合的目的&#xff0c;从而实现继承…
阅读更多...
【转】JAVA中的转义字符

【转】JAVA中的转义字符

JAVA中转义字符&#xff1a; 1.八进制转义序列&#xff1a;\ 1到3位5数字&#xff1b;范围\000~\377 \0&#xff1a;空字符 2.Unicode转义字符&#xff1a;\u 四个十六进制数字&#xff1b;0~65535 \u0000&#xff1a;空字符 3.特殊字符&#xff1a;就3个 \"&#xff1a…
阅读更多...
最新文章

Copyright @ 2022~2023